</>

WebDevTools

CSS Gradient Generator

Linear and radial gradients

Pick colors and angles, preview the result and copy CSS.

CSS
.gradient {
  background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
}

Guide: create linear and radial CSS gradients

Hero sections and buttons use `linear-gradient` with multiple stops and `deg` angles. Tweaking DevTools without a side-by-side preview slows design iteration.

Stops and angle update an in-browser preview — no assets hit a server. Export ready-made `background` or `background-image` declarations.

Use for prototypes, brand tokens, and hover states. Check text contrast over the gradient with the color converter — WCAG needs minimum ratios.

Step by step

  1. Pick linear or radial — Linear uses angle; radial uses center position and ellipse/circle shape.
  2. Add color stops — Drag percentages (`0%`, `50%`, `100%`) for smooth blends or hard bands.
  3. Tune on the preview — Test with real typography — dark top gradients help white headline contrast.
  4. Copy the CSS — Paste into modules, Tailwind arbitrary `bg-[linear-gradient(...)]`, or `--gradient-*` variables.

Frequently asked questions