Gradient Generator
Create stunning CSS gradients with ease • Copy code instantly
CSS Code
background: linear-gradient(135deg, #10b981 0%, #0ea5e9 100%);
0°
180°
360°
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.