Configuration
Presets
Beautiful Gradients
Export to CSS instantly
background: linear-gradient(45deg, #38bdf8, #818cf8);
CSS Gradients Explained
What are Linear Gradients?
A linear gradient creates a band of colors that progress in a straight line. You can control the direction (e.g., to the right, to the bottom corner) and the angle.
CSS syntax: background: linear-gradient(direction, color-stop1, color-stop2, ...);
Why use Gradients?
Gradients add depth and dimension to flat designs. They were popularized heavily in modern UI trends like iOS design and Glassmorphism. They can guide the user's eye and create a more immersive experience than flat colors alone.