All toolsESC
Generate / CSS Gradient
CSS Gradient
Build and preview linear, radial, and conic CSS gradients with live code output.
Angle135°
Color Stops
#06b6d40%#a855f7100%Presets
Preview
CSS
background: linear-gradient(135deg, #06b6d4 0%, #a855f7 100%);Tips
Linear — Use linear-gradient for directional color transitions
Radial — Radial gradients create circular or elliptical color spreads
Multi-stop — Add more color stops for complex multi-color effects
About CSS Gradient
Build and preview CSS gradients with a visual editor and live code output. RAW's CSS Gradient Generator supports linear, radial, and conic gradients with multiple color stops, angle control, and a preset gallery. Copy the CSS code and use it directly in your stylesheets.
How to use
- 1Choose a gradient type: linear, radial, or conic.
- 2Add and adjust color stops by clicking on the gradient bar.
- 3Set the angle or position for directional gradients.
- 4Copy the generated CSS code to use in your project.
Frequently Asked Questions
Which gradient types are supported?
RAW supports all CSS gradient types: linear-gradient (straight line), radial-gradient (circular/elliptical), and conic-gradient (color wheel). Each has full control over angle, position, and color stops.
Can I use multiple color stops?
Yes. Add as many color stops as you need. Click on the gradient bar to add stops, drag them to reposition, and click to change colors. Most gradients work best with 2-5 stops.
Is the generated CSS cross-browser compatible?
Yes. The generated CSS uses the modern gradient syntax which is supported by all current browsers (Chrome, Firefox, Safari, Edge). No vendor prefixes are needed for modern browsers.