CSS & UI StylingPreview
CSS Gradient Generator
Create smooth linear and radial CSS gradients, reorder color stops, and export CSS and Tailwind snippets.
Angle:135°
Color Stops (3/6)
0%
50%
100%
Gradient Preview
LINEAR • 3 STOPS
CSS Rule
background: linear-gradient(135deg, #7c3aed 0%, #d946ef 50%, #06b6d4 100%);
Tailwind Utility
bg-[linear-gradient(135deg,_#7c3aed_0%,_#d946ef_50%,_#06b6d4_100%)]
Multi-Stop Blending
Add up to 6 custom color stops and adjust percentage positions for precise color blending and transitions.
Angle & Radial Controls
Fine-tune directional degree angles for linear gradients or create circular radial glows with a single click.
Instant Frontend Export
Export production-ready CSS background rules and modern arbitrary Tailwind utility classes.