Image

Animated Background

Easy to use grid for creating custom layouts

Features

Background Effect Types
  • 🔵 Bokeh – Soft, dreamy floating orbs with blur effects
  • 🌊 Gradient Wave – Flowing, morphing gradient animations
  • 🔷 Floating Shapes – Geometric shapes drifting across the background
  • 🎨 Mesh Gradient – Organic, blending color blobs that morph and move
  • ✨ Starfield – Twinkling stars for a cosmic atmosphere
  • 💡 Spotlight – Dynamic light beam that sweeps across
  • 〰️ Waves – Layered wave animations at the bottom
  • 🎯 Ripple – Expanding circular ripples from a chosen position
  • 📺 Animated Noise – Subtle TV static/grain texture effect
Color Controls
  • Primary Color – Main effect color
  • Secondary Color – Supporting color for gradients and variation
  • Accent Color – Third color for richer palettes
  • Background Color – Base canvas color behind the effect
Animation Controls
  • Animation Speed (5-60s) – Control how fast effects animate
  • Intensity (10-100%) – Adjust the prominence of the effect
  • Blur Amount (0-100px) – Add softness to effect elements
  • Effect Opacity (10-100%) – Control transparency of the animation layer
Ripple-Specific Controls
  • Position – Bottom Left, Bottom Right, Top Left, Top Right, or Center
  • Ripple Growth (10-100) – Control how much the ripple expands
Container Settings
  • Min Height (px, vh, %) – Set minimum container height
  • Padding – Inner spacing for content
  • Border Radius – Rounded corners
  • Overflow – Hidden or Visible
Content Layout
  • Full LayoutV2 controls for child element positioning
  • Flexbox alignment and distribution
  • Responsive layout options
Performance
  • Pure CSS animations (no JavaScript overhead)
  • GPU-accelerated transforms
  • Lightweight and smooth

I'm a container!

Custom animated gradients

Unique Ripple Effect

Create your own

Image
© 2024 GreyPhox Digital. All rights reserved.

I'm a cat. This is a breakdance popup