CSS Gradient Generator
Create beautiful linear and radial CSS gradients with live preview.
CSS Gradient Generator
Create beautiful CSS gradients with live preview
Position:0%
Position:100%
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);FAQ
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors. They are defined using functions like linear-gradient() and radial-gradient() and used as background images.
What is the difference between linear and radial gradients?
Linear gradients transition colors along a straight line at a specified angle. Radial gradients transition colors from a center point outward in a circular or elliptical shape.
What are color stops?
Color stops define the colors in a gradient and their positions. You can have multiple color stops to create complex multi-color gradients.