CSS Gradient Generator
Generate CSS gradients with up to 8 color stops, linear/radial/conic/repeating, 25+ presets, Tailwind & SCSS output.
Gradient Type
Repeating
Output Format
Radial Shape
Color Stops
Preview Size
135°
Presets:
Output
Preview
◆ What it does
Create beautiful CSS gradients with a visual editor. Supports linear, radial, conic, repeating types with up to 8 color stops and 25+ presets.
▸ How to use
- Choose gradient type: linear, radial, or conic
- Add up to 8 color stops with position control
- Adjust angle or shape settings
- Pick from 25+ presets for instant results
- Copy CSS, Tailwind, or SCSS output
▸ Why use this
- Visual real-time preview as you edit
- Up to 8 color stops for complex gradients
- Repeating gradient support
- One-click presets library
- Multiple output formats (CSS, Tailwind, SCSS)