CSS Gradient Generator
FreeCreate CSS gradients visually. Linear, radial, and conic. Add color stops, set direction, copy CSS. Free, browser-based, no signup.
What's next
Settings guide
Linear gradient direction options:
| Syntax | Direction |
|---|---|
to right | Left → Right (0° = bottom to top) |
to bottom | Top → Bottom (default if omitted) |
45deg | Bottom-left → Top-right |
135deg | Top-left → Bottom-right |
to bottom right | Corner-to-corner (responsive, not a fixed angle) |
Color stop syntax:
- ·
#FF5733 0%— start position - ·
#FF5733— evenly distributed when position omitted - ·
#FF5733 30%, #3B82F6 70%— asymmetric spread - ·
transparent— fade to transparent
Gradient performance:
- ·CSS gradients are rendered by the GPU — no performance penalty vs solid colors.
- ·Avoid very long gradient lists (10+ stops) in animations — recalculation cost increases.
- ·Use
background-attachment: fixedcautiously with gradients — disables GPU compositing.
Format comparison
CSS gradients vs SVG gradients: CSS gradients are simpler and require no markup. SVG gradients are more powerful for complex shapes, gradient along a path, or when the gradient needs to be reused as a fill on text or icons. For background gradients, always use CSS. For icon/text gradients, SVG or the CSS background-clip: text approach.
CSS gradients vs image files: Gradients are resolution-independent, load instantly (no HTTP request), and can be animated. Photographic gradients with complex texture effects still require image files. For everything else, CSS gradients are strictly better.
Linear vs radial vs conic: Linear gradients are the most common — directional transitions for backgrounds and overlays. Radial gradients create light-source effects and circular reveals. Conic gradients are specialized — useful for progress indicators, pie charts, and color wheel visualizations. Most UI needs are covered by linear.
How it works
Choose type
Select linear, radial, or conic gradient type.
Add color stops
Click on the gradient bar to add stops. Drag to reposition. Use the color picker to set each stop's color and opacity.
Set direction
For linear: choose an angle or direction keyword. For radial: set the center point and shape.
Copy CSS
Click 'Copy CSS' to get the complete background property value, ready to paste into your stylesheet.
About this format
CSS gradients are smooth transitions between two or more colors defined entirely in code — no image files, no server requests, instant rendering. A CSS gradient can replace a background image on a hero section, add depth to a button, create a frosted-glass effect, or produce complex multi-color backgrounds that would otherwise require a designer and a Photoshop file.
CSS supports three gradient types: `linear-gradient()` (directional, straight-line transitions), `radial-gradient()` (circular or elliptical transitions expanding from a center point), and `conic-gradient()` (transitions around a rotation point, useful for pie charts and color wheels). Each type supports any number of color stops with precise position control.
This generator provides a visual editor where you click to add stops, drag to reposition them, and pick colors using the full color picker — then copies the exact CSS you need. No manual syntax. No guessing at angle values.