Blue gradient
A blue gradient is the safest large surface in design, which is why half the web runs on one. Blue holds its character from near-white ice to near-black navy, so a single hue family can carry a whole background without the drift toward grey that most colors suffer when darkened.
5blue gradients, ready to use
Each of these keeps its stops inside the blue family or one neighbour, because the muddy zone between two distant hues is what makes a gradient look accidental. The vertical versions are built as backgrounds, light enough at one end to hold dark text. Sky to sea is the definitive one: hue steady, lightness doing all the work.
Classic blue
linear-gradient(160deg, #0A84FF, #003C8F)
The interface staple: bright enough to read as blue at a glance, dark enough at the foot for white text.
Blue violet
linear-gradient(135deg, #0A84FF, #7A5CFF)
The one step outside the family that always works, because violet is next door.
Common questions
- What two colors make a good blue gradient?
- Stay inside the family and separate the stops by lightness rather than hue: a sky blue into a deep sapphire, or ice into azure. The blend stays clean because every intermediate color is still blue. Reach outside the family only toward a neighbour, cyan on one side or violet on the other.
- What is the CSS for a blue gradient background?
- Set background: linear-gradient(180deg, #87CEEB, #0F52BA) on the element, swapping in any pair above. The 180 degree angle runs light to dark down the page, which is the usual choice for a background because the light end sits behind the heading.
- Why do blue and purple blend so well?
- They are neighbours on the color wheel, so every color the blend passes through is itself a named region, indigo and violet, rather than an unnamed grey. Blends fail in the dead zone between distant hues; adjacent hues have no dead zone.