CSS Gradient Generator
Visually create linear and radial gradients and get the CSS code instantly.
0°
90°
360°
Preview
background:
linear-gradient(90deg, #4ade80, #3b82f6);
How to use CSS Gradients
CSS gradients allow you to display smooth transitions between two or more specified colors. They are treated as an image type by the browser (`background-image`), but generated by the browser itself, meaning they are lightweight and scalable.
Linear vs Radial
- Linear Gradients: Colors flow in a straight line (down, up, left, right, or diagonal).
- Radial Gradients: Colors radiate from a central point outward.