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 gray that most colors suffer when darkened.
5 blue gradients, ready to use
Each of these keeps its stops inside the blue family or one neighbor, 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 neighbor, 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 neighbors on the color wheel, so every color the blend passes through is itself a named region, indigo and violet, rather than an unnamed gray. Blends fail in the dead zone between distant hues; adjacent hues have no dead zone.