CSS Gradient Generator

Azure gradients for backgrounds, cards and headers: from pale sky tones to deep ocean blue, in the range between cyan and blue. Hover a gradient to see its colors, or click it to open it in the generator and customize it.

FAQ

How do I make an azure gradient in CSS?

Pair a light and a darker shade of azure (a blue-leaning cyan), for example linear-gradient(135deg, #9FCEF0 0%, #1A5C72 100%). Keeping both colors in the same hue family keeps the gradient clean.

What color is azure?

Azure is a bright sky blue between cyan and blue. The CSS named color azure (#F0FFFF) is a very pale version of it, almost white.