Fundamentals

Buttons Text & Typography Forms Navigation & UI Loading

Design & Visuals

Backgrounds Glass & Morphism Visual Effects Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Depth Cursors

Gallery & More

Cards & Layouts Gallery & Media Data & Visualization Atmosphere Utilities
All Effects New Favorites Templates Blog Tips ✨ Go Premium

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

Mesh Gradient

Multiple radial gradients that slowly shift positions.

CSS Gradient Organic
Particles

Floating Particles

Particles that continuously float upward.

JS Particles Loop

Gradient Wave

Diagonal gradient animated in a smooth loop.

CSS Gradient Smooth

Aurora Borealis

Northern lights effect with dancing lights.

CSS Aurora Blur

Grid Pattern

Technical grid with center vignette.

CSS Pattern Tech

Noise Texture

Grain texture for a cinematic look.

CSS Texture Film

Light Rays

Light rays in continuous rotation.

CSS Light Rotate

Animated Blobs

Floating organic shapes with blur.

CSS Organic Blur

Geometric Shapes

Animated floating geometric shapes.

CSS Shapes Float

Starry Night

Twinkling starry sky with shooting stars.

JS Stars Night

Aurora Effect

Northern lights effect with animated colorful gradients.

CSS Aurora Animated

Noise/Grain Texture

Grainy SVG texture for a cinematic effect.

CSS SVG Texture

Animated Mesh Gradient

Animated mesh gradient with smooth transitions.

CSS Gradient Animated

Star Field

Star field in continuous motion.

CSS Stars Space

Gradient Animation Loop

Multicolor gradient in an infinite loop.

CSS Gradient Loop

Network Lines

Geometric connected network lines.

CSS Pattern Tech

Holographic Effect

Holographic effect with rainbow colors.

CSS Holographic Rainbow

Dot Grid Pattern

Elegant and minimalist dot grid.

CSS Pattern Minimal

Floating Shapes

Colorful floating shapes with blur effect.

CSS Shapes Blur

Spotlight Follow

Spotlight that follows the mouse cursor.

CSS JS Interactive
AURORA

Aurora Mesh

Aurora borealis mesh with green, cyan and purple gradients that blend and slowly ripple.

CSS Animation Organic

Sunset Mesh

Warm-toned sunset mesh gradient — orange, pink, red and purple in motion.

CSS Animation Warm

Neon Mesh

Vibrant neon mesh with pulsating spots of electric blue, hot pink and lime green.

CSS Neon Vibrant

Pastel Mesh

Soft mesh gradient with lavender, mint and peach tones floating in harmony.

CSS Soft Pastel

Monochrome Mesh

Elegant monochrome mesh in shades of blue and indigo, subtle and deep.

CSS Monochrome Elegant

Interactive Mesh

Interactive mesh gradient whose color spots follow the mouse cursor.

CSS JS Interactif

Gradient Morph

The mesh morphs between two completely different color palettes every few seconds.

CSS JS Transition

Noise Mesh

Mesh gradient overlaid with a subtle SVG noise texture for an organic, textured look.

CSS SVG Texture

Glass Mesh Card

Card with colorful mesh background and glassmorphism overlay with blur and transparency.

CSS Glass Composant

Animated Border Mesh

Animated border made of a multicolor mesh gradient rotating around the element.

CSS Border Animation
Breathing Gradient

Color Breathing Gradient

Breathing gradient animating angle and hues via @property in OKLCH color space.

CSS @property OKLCH

Duotone Image Filter

Transforms content to duotone on hover using mix-blend-mode and grayscale.

CSS Blend Mode Filter

Halftone Effect

SVG filter with feComponentTransfer and feMorphology for an animated halftone pattern on hover.

SVG Filter Hover Halftone

Chromatic Aberration Text

RGB channel separation on hover creating a prismatic effect with pseudo-elements.

CSS Hover RGB Split

Color Mix Crossfade

Two colors blended via color-mix() showing oklch vs srgb blending paths.

CSS color-mix() OKLCH
Pink
Cyan
Neon

Neon Glow Pulse

Elements with pulsing neon glow via multiple animated box-shadow layers.

CSS Animation Neon

Gradient Spotlight

Radial gradient follows the cursor revealing vibrant colors under a muted surface.

JS Mouse Mask

Thermal Vision

Heat map with hot/cold zones that react to hover interaction.

CSS Hover Gradient

Color Space Morph

Gradient transitioning between sRGB vs OKLCH color spaces showing midpoint differences.

CSS Color Spaces Gradient

Relative Color Palette

Entire palette derived from a single base color via OKLCH and computed custom properties.

CSS JS OKLCH

Noise Overlay

Subtle texture on gradient

Noise Overlay

SVG noise overlay on a gradient background, using mix-blend-mode overlay for a subtle organic texture.

CSS SVG Texture

Film Grain

Film effect with animated grain via feTurbulence, horizontal scanlines and dark vignette.

SVG Animation Film

Paper Texture

Paper background with fractalNoise texture in multiply. Parchment look with decorative stamp.

CSS SVG Vintage

Grain Gradient

Dark gradient with animated grain via Canvas 2D. Noise is regenerated each frame for a living effect.

Canvas JS Gradient

Noise Displacement

Text distorted with SVG feDisplacementMap. Distortion intensity increases on hover.

SVG Filter Hover

Frosted Noise

Frosted glass card with backdrop-filter and grain noise overlay layer for a realistic look.

CSS Backdrop Grain

Halftone Pattern

Print halftone effect with dot pattern generated in CSS via repeated radial-gradient.

CSS Pattern Print

Organic Blob

Organic shape with animated SVG feDisplacementMap. The blob naturally deforms with a grain texture.

SVG Animation Organic

Vintage Photo

Retro photo effect with sepia tones, fractal grain, vignette and vintage color overlay.

CSS SVG Retro

Noise Morph

Rotating shape with animated grain and pulsing glow. Multiple noise layers in overlay.

CSS SVG Animation

String Lights

Christmas string lights in SVG: a wire that hangs and sways, colourful bulbs that twinkle, and a soft physics that follows the cursor. Colours, density and text are customisable.

💡 Great for: year-end hero/header, festive banner, greeting card, seasonal landing page, decorated footer.

SVG Vanilla JS Festive Premium

Frequently Asked Questions

How do you animate a background gradient in CSS? +

Set a background with linear-gradient, double its size with background-size: 200% 200%, then animate background-position from 0% 0% to 100% 100% with @keyframes. Add animation: gradient 5s ease infinite for a smooth loop.

Which animated background is the most performant? +

Animated CSS gradients are the lightest as they don't require JavaScript. Canvas particle effects are more demanding but can be optimized by limiting the number of particles and using requestAnimationFrame.

How do you create a wave effect in pure CSS? +

Use an SVG or pseudo-element with animated border-radius. The modern technique uses clip-path with an animated Bezier curve or an SVG path animated with CSS.

How do you prevent an animated background from slowing down your site? +

Use will-change:transform, limit particles to 50-100 max, pause the animation when the element is not visible (IntersectionObserver), and respect prefers-reduced-motion for sensitive users.

Can you use an animated background on mobile? +

Yes, but keep it simple: reduce the number of particles, use CSS gradients instead of canvas, and disable heavy animations on less powerful devices with a resolution media query.

Similar Categories

🔮

Glass & Morphism

42 effects

 🌊

Liquid & Morphing

30 effects

 ✏️

SVG & Art

30 effects