TTULAKITO
Designer

CSS Gradient Generator

Create linear gradients and copy CSS background code.

All tools

Gradient

CSS

background: linear-gradient(135deg, #0f766e, #b7791f);

Frequently asked questions

Why does my CSS gradient look banded?
Banding happens when adjacent colors are too close in luminance for the display to render smooth steps, especially on 8-bit panels. Add a subtle noise overlay or interpolate through a wider hue range to break up the bands.
What's the syntax for a diagonal linear gradient?
Use an angle like linear-gradient(135deg, #ff0080, #7928ca) or a keyword like to bottom right. 0deg points up; angles increase clockwise.
Can I animate a CSS gradient?
You can't transition between gradients directly, but you can animate background-position on an oversized gradient, or interpolate CSS custom properties registered with @property to morph color stops.