CSS Gradient Generator
Create stunning CSS gradients with ease • Copy code instantly
Our CSS Gradient Generator lets you create beautiful linear gradients and radial gradients in seconds. Adjust angles, add color stops, and get the CSS code instantly. Free tool, no signup required.
background: linear-gradient(135deg, #10b981 0%, #0ea5e9 100%);
What is a CSS Gradient?
A CSS gradient allows you to display smooth transitions between two or more specified colors. CSS gradients let you display smooth transitions between specified colors, rather than using a single solid color. They are defined by the background-image property.
Linear vs. Radial Gradients
L Linear Gradient
Goes down/up/left/right/diagonally. You define the direction (angle) and the color stops.
R Radial Gradient
Defined by their center. Colors emanate outward from a central point in a circular or elliptical shape.
How to Use This Generator
- Select Type: Choose between Linear or Radial gradient.
- Set Angle: For linear gradients, adjust the angle slider to change direction.
- Manage Stops: Click on color stops to change colors. Drag sliders to adjust position.
- Add/Remove: Add more colors or remove existing ones to create complex gradients.
- Copy: Click "Copy CSS" to grab the code for your stylesheet.
Explore More Color Tools
Take your designs further with these resources: