CSS Gradient
Create beautiful CSS gradients with a visual editor. Export to CSS, SCSS, Tailwind, SVG, or PNG.
No watermarkFree & unlimited
Preview shape
Export
Presets gallery
Type
Creates a tiled pattern
Angle
135degColor stops (2)
0%
100%
Tip
Drag stops on the gradient bar to reposition them. Use 3+ stops for richer gradients. The angle wheel lets you pick directions precisely.
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
With CSS variables
--gradient-start: #6366f1; --gradient-end: #ec4899; background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
All processing happens in your browser. No data is sent to any server.
About this tool
- 1
Choose gradient type
Select linear, radial, or conic gradient.
- 2
Add color stops
Click "Add" to add more colors. Drag sliders to position them.
- 3
Adjust angle
Set the gradient direction (for linear and conic types).
- 4
Copy CSS
Copy the generated CSS code to your clipboard.
- Two-color gradients are the most versatile. Three or more create more complex effects.
- Use the presets as starting points and customize from there.
- Conic gradients create beautiful color wheel effects.
- Radial gradients are great for spotlight or vignette effects.
- Linear/Radial/Conic
- Multiple color stops
- Angle control
- Presets
- Live preview
- CSS output
- Create gradient backgrounds for websites.
- Design gradient buttons and UI elements.
- Build colorful hero sections and banners.
- Create gradient overlays for images.