Generate CSS gradient backgrounds visually. Create linear and radial gradients with customizable colors, direction, and type with live preview and copy-ready CSS.
CSS gradients create smooth transitions between two or more colors without using image files. They are lighter than image backgrounds, scale perfectly at any size, and can be animated. Gradients are essential for modern UI design, used in backgrounds, buttons, overlays, and text effects.
Gradient = linear-gradient(direction, color1, color2) or radial-gradient(shape, color1, color2)Linear gradients transition colors along a straight line defined by a direction (e.g., to right, 45deg). Radial gradients transition from a center point outward in a circular or elliptical shape. Both support multiple color stops with optional position values for complex gradient designs.
| Input | Output |
|---|---|
| Colors: #06b6d4 → #10b981, Direction: to right, Type: linear | background: linear-gradient(to right, #06b6d4, #10b981); |
| Colors: #8b5cf6 → #ec4899, Direction: to bottom right, Type: linear | background: linear-gradient(to bottom right, #8b5cf6, #ec4899); |
| Colors: #f59e0b → #ef4444, Type: radial | background: radial-gradient(circle, #f59e0b, #ef4444); |