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.