CSS Gradients Explained: Linear vs Radial
A CSS gradient blends two or more colors smoothly. Learn the difference between linear and radial gradients and how to build one without writing code.
A CSS gradient is a smooth transition between two or more colors, rendered by the browser with no image file needed. The two main types are linear and radial.
Linear vs radial
- Linear — colors blend along a straight line at an angle:
linear-gradient(90deg, #4f46e5, #ec4899) - Radial — colors blend outward from a center point in a circle or ellipse:
radial-gradient(circle, #4f46e5, #ec4899)
Color stops
Each color can have a position (a stop), letting you control where the blend happens: linear-gradient(90deg, red 0%, yellow 50%, green 100%). Add more stops for multi-color effects.
Why use them
Gradients add depth to buttons, backgrounds and cards without extra image requests, so they stay sharp at any size and load instantly.
Build one now
Pick colors and an angle in the gradient generator and copy the CSS. Need exact color values? Use the color converter. Related: CSS box-shadow explained.