CSS Gradient Generator
Build linear and radial gradients visually. Pick stops, angle, and direction; copy as CSS or Tailwind arbitrary value.
background: linear-gradient(135deg, #ff7a59 0%, #6a3093 100%);
bg-gradient-to-br from-[#ff7a59] to-[#6a3093]
01 — Overview
How it 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 it
- 01
Build a hero background gradient that doesn't look like every other SaaS site
- 02
Translate a Figma gradient to clean CSS
- 03
Prototype a button or card surface with a subtle gradient sheen
- 04
Get the Tailwind class for an existing CSS gradient
03 — Examples
Real input, real output
linear, 135°, #ff7a59 → #6a3093
ex 01linear-gradient(135deg, #ff7a59 0%, #6a3093 100%)
A standard two-stop diagonal sweep.
radial, centered, three stops
ex 02radial-gradient(circle at 50% 50%, #f6d365 0%, #fda085 50%, #f76b1c 100%)
Sunburst-style radial gradient with three color stops.
04 — FAQ
Frequently asked
05 — More
Tools that pair well
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 Picker & Converter
Pick or paste a color, get every format — hex, RGB, HSL, OKLCH, CMYK, and the closest named color.
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.