CSS Generator
Gradient Generator
Switch gradient modes, tune angles and centers, drag color stops, and copy CSS or Tailwind values.
background
Gradient Field
Controls
Stop 1
Stop 2
Stop 3
Output
Copy-ready CSS
Pure CSS
background: linear-gradient(135deg, #22d3ee 0%, #a78bfa 52%, #f97316 100%);Tailwind v4
bg-[linear-gradient(135deg\,_#22d3ee_0%\,_#a78bfa_52%\,_#f97316_100%)]Presets
Popular Gradient Presets
Combine modes, angles, center positions, and draggable color stops.
Aurora Linear
Aurora Linear is a cool aurora color movement gradient built with linear CSS syntax.
Sunset Radial
Sunset Radial is a warm sunset contrast gradient built with radial CSS syntax.
Ocean Linear
Ocean Linear is a deep ocean color flow gradient built with linear CSS syntax.
Neon Conic
Neon Conic is a electric neon energy gradient built with conic CSS syntax.
Pastel Diagonal
Pastel Diagonal is a soft pastel blending gradient built with linear CSS syntax.
Coral Linear
Coral Linear is a warm coral brightness gradient built with linear CSS syntax.
Steel Radial
Steel Radial is a cool steel interface tone gradient built with radial CSS syntax.
Berry Conic
Berry Conic is a berry-toned color lift gradient built with conic CSS syntax.
Dusk Linear
Dusk Linear is a late dusk saturation gradient built with linear CSS syntax.
Ice Radial
Ice Radial is a clean icy brightness gradient built with radial CSS syntax.
Midnight Conic
Midnight Conic is a midnight blue drama gradient built with conic CSS syntax.
Electric Diagonal
Electric Diagonal is a electric blue-green snap gradient built with linear CSS syntax.
More tools