What is a CSS Gradient?
A CSS gradient is a smooth transition between two or more colors, generated entirely by the browser without any image files. Gradients are defined using CSS functions and can be applied anywhere a background image is accepted.
Gradient Types
- Linear: Colors transition along a straight line at a given angle. The most common type, used for backgrounds, buttons, and dividers.
- Radial: Colors radiate outward from a center point in a circular or elliptical shape. Great for spotlight and glow effects.
- Conic: Colors rotate around a center point like a color wheel. Useful for pie charts and circular progress indicators.
Color Stops
Each color stop defines a color and its position (0–100%) along the gradient. Add as many stops as needed — the browser smoothly interpolates between them. Drag the position slider to control where each color begins and ends.
How to Use the Output
Copy the generated CSS and paste it into your stylesheet. The output is a standard background declaration that works in all modern browsers with no vendor prefixes required.