CSSGradientsDesignBackgroundsVisual Design

Modern CSS Gradients: From Static to Animated Mesh Backgrounds

CSS gradients have evolved from simple two-color fades to animated mesh brushes, conic spectrums, and holographic foils. This guide covers all modern gradient techniques with production-ready code.

U

UIXplor Team

February 24, 2026 · 8 min read

✦

01Linear Gradients: Beyond Two Colors

Most CSS gradient tutorials show `from red to blue`. But multi-stop gradients with precise color positioning unlock far more expressive results:

css
/* Sunset with 5 color stops */
.sunset {
  background: linear-gradient(
    to bottom,
    #ff6b6b   0%,   /* sky red */
    #ffa500  25%,   /* orange */
    #ff6b6b  50%,   /* pink */
    #7b2d8b  75%,   /* purple */
    #1a1a2e 100%    /* night */
  );
}

The trick with sunsets and skies is repeating similar hues with variation — the gradient should feel like light, not a color chart.

02Radial Gradients for Spotlights and Vignettes

Radial gradients radiate from a center point. `ellipse at` lets you position and shape the center precisely:

css
/* Centered spotlight on dark background */
.spotlight {
  background:
    radial-gradient(
      ellipse at center,
      rgba(184, 251, 60, 0.15) 0%,
      rgba(184, 251, 60, 0.04) 35%,
      transparent 70%
    ),
    #050508;
}

/* Corner vignette — dark edges */
.vignette {
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%);
}

Multiple radial gradients can be stacked with commas to create multi-light-source effects.

03Conic Gradients: The Color Wheel

Conic gradients sweep around a point — perfect for color wheels, pie charts, and holographic effects:

css
/* Full spectrum conic */
.color-wheel {
  width: 200px; height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    hsl(0, 100%, 60%),
    hsl(60, 100%, 60%),
    hsl(120, 100%, 60%),
    hsl(180, 100%, 60%),
    hsl(240, 100%, 60%),
    hsl(300, 100%, 60%),
    hsl(360, 100%, 60%)
  );
}

Combined with `mask` (as shown in the loader ring example), conic gradients create reusable arc shapes.

04Mesh Gradients with Stacked Radials

Figma made mesh gradients famous. You can replicate them with multiple `radial-gradient` layers positioned at different coordinates:

css
.mesh-bg {
  background-color: #0f0c29;
  background-image:
    radial-gradient(at 40% 20%, rgba(184,251,60,0.15) 0px, transparent 50%),
    radial-gradient(at 80% 0%,  rgba(168,85,247,0.2)  0px, transparent 50%),
    radial-gradient(at 0%  50%, rgba(6,182,212,0.15)  0px, transparent 50%),
    radial-gradient(at 80% 50%, rgba(184,251,60,0.1)  0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(168,85,247,0.15) 0px, transparent 50%);
}

Each radial is a 'color blob' at a specific position. Adjust `at X% Y%` to move them and `rgba()` opacity to change intensity.

05Animated Gradients

CSS variables and `@keyframes` make gradient animation possible:

css
.animated {
  background: linear-gradient(-45deg, #0f0c29, #302b63, #24243e, #0f3460);
  background-size: 400% 400%;
  animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

The `background-size: 400% 400%` makes the gradient larger than the element. The animation shifts `background-position` to expose different regions of it — creating a floating, moving gradient effect.

06Noise Texture Overlays

Adding noise to a gradient breaks the 'too smooth' digital feel:

css
.noise-bg {
  position: relative;
  background: linear-gradient(135deg, #1a1a3e, #0f0f2e);
}

.noise-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg...noise data...");
  opacity: 0.06;
  pointer-events: none;
}

You can generate SVG noise with `<feTurbulence>` filter, or use a tiled noise PNG. Keep opacity below 0.1 — enough to break the smoothness, not enough to be visible as texture.

Related UI Components

◈

Collections

All UI component collections

🌈

Gradients

Gradient generator & examples

Back to Blog