Gradient Generator

Using the Gradient Generator

1. Pick two colors from the color pickers. These become the start and end stops; the browser interpolates every pixel in between in the sRGB color space by default.
2. Choose the gradient type - linear for directional color washes, radial for center-outward glows and spotlights.
3. Set the angle (linear only). 0deg fades from bottom to top, 90deg from left to right, 180deg from top to bottom. This matches the CSS Images Level 3 convention where angles rotate clockwise from the top.
4. Review the live preview. The swatch shows the exact pixels the browser will paint - no hidden post-processing.
5. Click "Copy CSS" to paste the background-image declaration into any stylesheet, Tailwind arbitrary value, or CSS-in-JS object.

What a CSS gradient actually is

A CSS gradient is not an image file - it's a generated <image> value produced by the linear-gradient() or radial-gradient() functions defined in the CSS Images Module Level 3 specification. The browser resolves these functions at paint time, sampling the interpolated color for every pixel inside the background painting area. Because nothing is rasterized to a file, gradients scale losslessly from a 24px favicon to a 4K hero background without pixelation.

Under the hood, compositors like Chrome's Skia, Firefox's WebRender, and Safari's Core Animation upload gradient stops as a short texture strip and stretch it across the element's background-positioning area. That's why gradients remain cheap even when they cover the whole viewport - the GPU does a single shader pass, not a per-pixel CPU calculation. Interpolation follows the sRGB color space unless you opt into in oklch or in lab (Chrome 111+, Safari 16.2+), which avoids the muddy gray midpoint you get when fading from blue to yellow in sRGB.

When you would reach for a gradient

• Hero section backgrounds that need depth without the weight of a JPEG.
• Button and CTA fills where a subtle two-stop gradient reads as more tactile than flat color.
• Skeleton loaders using a diagonal gradient animated with background-position for a shimmer sweep.
• Glassmorphism cards layered over a colorful gradient backdrop with backdrop-filter: blur().
• Chart fills when you want a bar to fade from high-saturation at the baseline to low-saturation at the tip.
• SVG fallbacks - a gradient used as a mask or a border-image source avoids shipping yet another asset through the network.

Pitfalls that surprise people

• The "gray middle" problem. A red-to-green sRGB gradient passes through muddy olive. Switch to linear-gradient(in oklch, red, green) for a perceptually even ramp - but check caniuse.com/css-color-4 because older Safari builds fall back to sRGB.
• Banding on 8-bit displays. Very subtle two-stop gradients over large areas can show diagonal stripes. Adding a tiny background-blend-mode: overlay noise texture, or using filter: contrast(1.005), breaks the bands.
• Angle direction confusion. CSS angles start at 12 o'clock and rotate clockwise. Designers coming from Sketch or Figma expect 0deg at 3 o'clock - always verify in the preview.
• Hard stops vs smooth ramps. linear-gradient(red 50%, blue 50%) produces a crisp split, not a fade. Useful for two-tone buttons; surprising if you forget the percentages.
• Repeating gradients tiling unexpectedly. repeating-linear-gradient needs a fixed-length final stop (like 20px), not a percentage, or it fills the whole element as a single cycle.

A bit of background on the spec

CSS gradients entered the platform as proprietary WebKit syntax around 2008 and were standardized in CSS Images Module Level 3. The current grammar supports any number of color stops, percentage or length positions, to keyword directions (to bottom right), conic gradients for pie-chart effects, and the Level 4 in <color-space> hint for perceptual interpolation. Support for linear and radial gradients has been universal since IE10 and Android 4.4, so you can use them without any prefix or fallback on today's web. Conic gradients need Firefox 83+ and were the last holdout. For accessibility, gradients are treated as decorative backgrounds by screen readers - they never expose stop colors, so always ensure foreground text keeps at least WCAG AA 4.5:1 contrast against the darkest point of the gradient underneath.

Gradients vs alternatives

Compared to an exported PNG or JPEG background, a CSS gradient saves a network request, scales perfectly at every DPR, and is trivially themeable with CSS custom properties. Compared to SVG <linearGradient>, the CSS version loses out on mid-stop transforms and complex gradient meshes but wins on terseness - one line versus a whole <defs> block. Compared to Tailwind's bg-gradient-to-r from-x to-y utilities, handwritten gradients let you use custom angles and more than two stops without escaping arbitrary values. For animated gradients, CSS still can't interpolate stops directly in a @keyframes block - you have to animate background-position on a larger-than-viewport gradient, or fall back to Houdini's Paint API for per-frame color math. If you need a true gradient animation with per-stop control, SVG + SMIL or WebGL will beat CSS every time.