Gradient Generator
Create CSS gradients with two or three colors. Preview and copy the generated CSS.
Preview
Linear
Direction: 135°
CSS Code
(3 lines)Click to collapse
1
2
3
background: linear-gradient(135deg, #ff6b6b, #4ecdc4, #45b7d1);
/* Or use as background-image */
background-image: linear-gradient(135deg, #ff6b6b, #4ecdc4, #45b7d1);
How to use this Gradient Generator
The Gradient Generator helps you create beautiful CSS gradients for your web projects. Start by selecting up to three colors using the color pickers or by entering HEX values directly. Choose between linear or radial gradient types, and adjust the direction angle for linear gradients using the slider. The preview box shows your gradient in real-time so you can see exactly how it will look. Once you're satisfied with your gradient, copy the generated CSS code from the output panel at the bottom. You can also click 'Send to CSS Variables' to export your gradient colors directly to the CSS Variables Exporter tool for further customization.