CSS Gradient Generator

Build linear and radial gradients visually. Pick stops, angle, and direction; copy as CSS or Tailwind arbitrary value.

CSS
background: linear-gradient(135deg, #ff7a59 0%, #6a3093 100%);
Tailwind
bg-gradient-to-br from-[#ff7a59] to-[#6a3093]
Type
Angle135°
Color stops

01 — Overview

How the CSS Gradient Generator works

A visual gradient builder for CSS. Drag stops, set angle, pick linear or radial, and copy the result as a CSS background-image declaration or a Tailwind arbitrary value. Live preview reflects every change.

02 — Use cases

When to use the CSS Gradient Generator

  1. 01

    Build a hero background gradient that doesn't look like every other SaaS site

  2. 02

    Translate a Figma gradient to clean CSS

  3. 03

    Prototype a button or card surface with a subtle gradient sheen

  4. 04

    Get the Tailwind class for an existing CSS gradient

03 — Examples

CSS Gradient Generator examples

linear, 135°, #ff7a59 → #6a3093

ex 01

linear-gradient(135deg, #ff7a59 0%, #6a3093 100%)

A standard two-stop diagonal sweep.

radial, centered, three stops

ex 02

radial-gradient(circle at 50% 50%, #f6d365 0%, #fda085 50%, #f76b1c 100%)

Sunburst-style radial gradient with three color stops.

linear, 90°, three stops with a midpoint hint

ex 03

linear-gradient(90deg, #0ea5e9 0%, #6366f1 45%, #ec4899 100%)

The middle stop sits at 45% rather than 50% so the blue holds slightly longer.

vertical scrim for text over an image

ex 04

linear-gradient(to bottom, rgba(13, 2, 33, 0) 0%, rgba(13, 2, 33, 0.9) 100%)

Fades from fully transparent to near-opaque using one color at two alpha values.

04 — FAQ

Gradient — frequently asked questions

Can I add more than two color stops?

Yes — add as many stops as you need. Each stop has a position (0–100%) and a color. Drag the handles in the preview or edit the values directly.

What's the difference between linear and radial?

Linear gradients travel along a single axis you specify with an angle. Radial gradients emanate from a point in concentric rings. Conic gradients (around a point) are a separate type.

Why does my gradient look banded?

Banding usually comes from low contrast between adjacent stops on a wide gradient. Add intermediate stops, increase the color distance, or switch to OKLCH interpolation for a smoother fall-off.

Does the Tailwind output use the gradient utilities?

For two-stop gradients it uses Tailwind's bg-gradient utilities. For three or more stops or unusual angles, it emits an arbitrary value (bg-[linear-gradient(...)]) so you don't lose fidelity.

How do I fade a gradient to transparent without it going grey?

Fade to a zero-alpha version of the same color rather than to the transparent keyword. In most engines transparent resolves to rgba(0, 0, 0, 0), so interpolating toward it drags the midpoint through black. Use rgba(255, 122, 89, 0) — the same RGB with alpha 0 — and the fade stays clean.

Can I animate a CSS gradient?

Not directly. background-image isn't an animatable property, so browsers jump between gradients instead of interpolating. The three workarounds are animating background-position across an oversized gradient, cross-fading two stacked layers with opacity, or registering a custom property with @property and animating that value.

05 — Reference

Specs and further reading

The primary sources this tool follows. Where behaviour is defined by a specification, we link the specification rather than a summary of it.

  • linear-gradient()

    MDN Web Docs — Syntax reference for gradient lines, color stops, and interpolation hints.

  • CSS Images Module Level 3

    W3C — The specification that defines gradient rendering and color-stop placement.

07 — More

Tools that pair with Gradient

AI

Color Palette Generator

Type a vibe — 'desert at dusk', 'cyberpunk lab' — and get a 5-color palette with hex, RGB, HSL, and OKLCH for every swatch.

Color/palette

CSS Box Shadow Generator

Build CSS shadows with sliders for offset, blur, spread, color, and opacity. Live preview, multi-shadow stacking, copy as CSS or Tailwind.

Color/box-shadow

CSS Animation Generator

Build CSS @keyframes animations visually. Pick a preset or design your own — duration, easing, iteration. Live preview, CSS + Tailwind output.

Color/animation

Last updated .