CSS Code
background: #667eea; background: linear-gradient(135deg, rgba(102, 126, 234, 1) 0%, rgba(118, 75, 162, 1) 100%);
Download as Image
Variations
Click any variation to copy its CSS
CSS Gradient Generator Online
Create beautiful CSS gradients visually. Free online gradient maker for linear, radial, and conic gradients. Copy CSS code instantly.
How It Works
Pick your gradient type (linear, radial, or conic). Add and position color stops by clicking on the gradient bar. Adjust the angle and direction. The tool generates the CSS code in real-time, ready to be copied into your stylesheet.
Common Use Cases
- Creating modern, eye-catching background gradients for websites
- Designing gradient overlays for hero sections and banner images
- Generating CSS gradient code without writing it by hand
- Experimenting with color combinations for branding and UI design
Frequently Asked Questions
A CSS gradient is a smooth transition between two or more colors, defined entirely in CSS without using an image file. It is used for backgrounds and overlays.
Yes, the CSS code is ready to paste into your stylesheet. It includes vendor prefixes for broader browser compatibility.
Yes, you can set the opacity of individual color stops to create fade-out or overlay effects.
The tool supports linear gradients (straight lines), radial gradients (circular/elliptical), and conic gradients (sweeping angles). Each type can have multiple color stops.
Yes, add as many color stops as you want. Click on the gradient bar to add new stops, drag to reposition, and click the X to remove stops.
For linear gradients, click to change the angle (0-360°) or use presets like 'to right', 'to bottom-right'. Radial gradients have shape and position controls.
Yes, the generated CSS code is displayed in real time. Copy it with one click and paste it directly into your stylesheet.