🌈

CSS Gradient Generator (Linear / Radial / Conic)

Visual builder for CSS linear / radial / conic gradients. 8 beautiful presets, multi-color stops, ready-to-copy CSS. Works with Tailwind v4.

All tools

Presets

Color stops

Preview

CSS

Linear / Radial / Conic gradients — copy ready-to-use CSS. Works with Tailwind v4 and vanilla CSS. Click + to add a color stop, drag the slider to adjust position.

Three CSS gradient types

Linear gradient: color transitions along a straight line. The most common — hero sections, buttons, cards. Syntax: linear-gradient(135deg, #FF512F, #F09819).
Radial gradient: color radiates from the center. Used for spotlight effects, vignettes. Syntax: radial-gradient(circle at center, #fff, #000).
Conic gradient: color rotates around the center. Great for color wheels, donut charts. Syntax: conic-gradient(from 0deg, red, yellow, green, blue, red).

Color stops

Every gradient needs at least 2 colors (color stops). You can add more and pin them at exact % positions:

linear-gradient(90deg,
  #ff0000 0%,    /* red at start */
  #ffff00 50%,   /* yellow at middle */
  #00ff00 100%   /* green at end */
)

Design tips

Don't use more than 3 colors in one gradient — it ends up looking like rainbow vomit.
Pick two colors of similar warmth (red-orange, blue-purple) — looks nicer than opposites.
Gradient background + white text: verify contrast with the Color Contrast Checker — avoid AA-fail regions.
Performance: gradients render on the GPU and are essentially free — no need to optimise.

Tailwind v4 syntax

Tailwind v4 has richer gradient utilities: bg-linear-to-r, bg-radial-[at_50%_50%], bg-conic-180. This tool produces vanilla CSS — paste into style or use the matching utility class.