Backgrounds & Colors
Animated backgrounds, mesh gradients, chromatic colors and noise textures.
How do you create backgrounds that grab attention? These 50 animated backgrounds cover all the latest trends: moving gradients, particles, CSS waves, mesh gradients, noise effects and geometric patterns. From subtle backgrounds for a corporate page to immersive animations for a creative portfolio.
Mesh Gradient
Multiple radial gradients that slowly shift positions.
Floating Particles
Particles that continuously float upward.
Gradient Wave
Diagonal gradient animated in a smooth loop.
Aurora Borealis
Northern lights effect with dancing lights.
Grid Pattern
Technical grid with center vignette.
Noise Texture
Grain texture for a cinematic look.
Light Rays
Light rays in continuous rotation.
Animated Blobs
Floating organic shapes with blur.
Geometric Shapes
Animated floating geometric shapes.
Starry Night
Twinkling starry sky with shooting stars.
Aurora Effect
Northern lights effect with animated colorful gradients.
Noise/Grain Texture
Grainy SVG texture for a cinematic effect.
Animated Mesh Gradient
Animated mesh gradient with smooth transitions.
Star Field
Star field in continuous motion.
Gradient Animation Loop
Multicolor gradient in an infinite loop.
Network Lines
Geometric connected network lines.
Holographic Effect
Holographic effect with rainbow colors.
Dot Grid Pattern
Elegant and minimalist dot grid.
Floating Shapes
Colorful floating shapes with blur effect.
Spotlight Follow
Spotlight that follows the mouse cursor.
Aurora Mesh
Aurora borealis mesh with green, cyan and purple gradients that blend and slowly ripple.
Sunset Mesh
Warm-toned sunset mesh gradient — orange, pink, red and purple in motion.
Neon Mesh
Vibrant neon mesh with pulsating spots of electric blue, hot pink and lime green.
Pastel Mesh
Soft mesh gradient with lavender, mint and peach tones floating in harmony.
Monochrome Mesh
Elegant monochrome mesh in shades of blue and indigo, subtle and deep.
Interactive Mesh
Interactive mesh gradient whose color spots follow the mouse cursor.
Gradient Morph
The mesh morphs between two completely different color palettes every few seconds.
Noise Mesh
Mesh gradient overlaid with a subtle SVG noise texture for an organic, textured look.
Glass Mesh Card
A card component with a vibrant mesh background and a frosted glass effect on top.
Glass Mesh Card
Card with colorful mesh background and glassmorphism overlay with blur and transparency.
Animated Border Mesh
Animated border made of a multicolor mesh gradient rotating around the element.
Color Breathing Gradient
Breathing gradient animating angle and hues via @property in OKLCH color space.
Duotone Image Filter
Transforms content to duotone on hover using mix-blend-mode and grayscale.
Halftone Effect
SVG filter with feComponentTransfer and feMorphology for an animated halftone pattern on hover.
Chromatic Aberration Text
RGB channel separation on hover creating a prismatic effect with pseudo-elements.
Color Mix Crossfade
Two colors blended via color-mix() showing oklch vs srgb blending paths.
Neon Glow Pulse
Elements with pulsing neon glow via multiple animated box-shadow layers.
Gradient Spotlight
Radial gradient follows the cursor revealing vibrant colors under a muted surface.
Thermal Vision
Heat map with hot/cold zones that react to hover interaction.
Color Space Morph
Gradient transitioning between sRGB vs OKLCH color spaces showing midpoint differences.
Relative Color Palette
Entire palette derived from a single base color via OKLCH and computed custom properties.