Skip to content
uxTools
Design & CSS

CSS Gradient Generator

Pick a gradient kind, drag stops on the track, dial the angle, and copy CSS, Tailwind, React inline style, or SVG snippets — all in your browser.

Gradient studio

Tune the kind, angle, position, and stops with a live preview.

90°
Color stops

Presets

Pick a starting point, then tweak stops and angle to taste.

Live preview

Toggle the checker grid and sample text to evaluate contrast and alpha.

AaBb 123AaBb 123

Code output

Grab the CSS, Tailwind class, React inline style, or SVG snippet.

CSSbackground: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
Tailwindbg-gradient-to-r from-[#6366f1] to-[#ec4899]
Reactstyle={{ background: "linear-gradient(90deg, #6366f1 0%, #ec4899 100%)" }}
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200">
  <defs>
    <linearGradient id="uxLinear" x1="0" y1="0.5" x2="1" y2="0.5">
    <stop offset="0%" stop-color="#6366f1" />
    <stop offset="100%" stop-color="#ec4899" />
    </linearGradient>
  </defs>
  <rect width="320" height="200" fill="url(#uxLinear)" />
</svg>