Skip to content
yutils
Example

Options

Type: linear
Angle: 135°
Stops: #5b21b6 0%, #ec4899 50%, #f97316 100%

Output (CSS)

background: linear-gradient(
  135deg,
  #5b21b6 0%,
  #ec4899 50%,
  #f97316 100%
);

Note

Supports linear, radial, and conic. Stops are add/remove on the fly. Copy the CSS straight into any project.

Usage / FAQ

When to use

  • Design hero-section or card backgrounds
  • Add gradient hover effects to buttons
  • Build multi-stop gradients for charts and infographics
  • Pair gradients between light and dark mode
  • Match gradients between Figma / Sketch and code

FAQ

Q.What's different about conic-gradient?
A.linear runs along a line, radial radiates from a point, conic sweeps around a center — perfect for pie charts and spinners. Supported in every modern browser since CSS 4.
Q.How are colors interpolated between stops?
A.Default is linear interpolation in sRGB — the midpoint can look muddy. Use a color-space hint in CSS 4 like `linear-gradient(in oklch, red, blue)` for cleaner mixing.
Q.My gradient looks banded.
A.Caused by 8-bit color limits plus close neighboring stops. Mitigate by adding more stops or applying a tiny noise / dither (via CSS filter or an overlay image).
Fun facts

  • CSS3's `linear-gradient()` was standardized in 2009 as part of the W3C CSS Image Values Module Level 3. Before that, PNG/SVG images were the typical way to embed gradients. Mozilla shipped it first as `-moz-linear-gradient` in 2008; WebKit and Opera followed, and consensus formed around the standard.

    W3C — CSS Image Values 3

  • `conic-gradient()` (CSS Image Values 4, 2018) was the last gradient family to be added — colors rotate clockwise from the center. It lets pure CSS draw pie charts, clock faces, and game progress meters without SVG or canvas.

    MDN — conic-gradient

  • Starting with CSS Color 4 (2024), gradient color interpolation can run in perceptual color spaces like `in oklch` — transitions look more natural than sRGB and dodge the 'muddy middle' (the dirty-gray midpoint trap). Syntax: `linear-gradient(in oklch, red, blue)`.

    W3C — CSS Color 4 interpolation

Related tools

See all in this category →