CSS Gradient Generator (Linear / Radial / Conic)

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.