Blue gradient: sky-to-ocean CSS and PNG backgrounds
This blue gradient runs from light sky blue (#56CCF2) to a saturated medium blue (#2F80ED) at 135°. Copy the CSS or download it as a PNG. Black text reads well on it (11.31:1 and 5.43:1); white text passes only for large type on the darker end.
background-color: #56ccf2;
background-image: linear-gradient(135deg, #56ccf2 0%, #2f80ed 100%);Variations
Reversed
#2F80ED → #56CCF2Softer
#91DEF7 → #78ACF3Deeper
#38859D → #1F539ARadial glow
#56CCF2 → #2F80ED
On this page
Blue is the color most websites and apps lean on for trust and calm, and a gradient keeps it from looking flat. This one starts with a bright, light blue (#56CCF2) and deepens to a stronger medium blue (#2F80ED). Both stops are vivid, so the blend stays clear and avoids the gray look that some blue gradients get in the middle.
How the gradient is built
The tool writes linear-gradient(135deg, #56ccf2 0%, #2f80ed 100%). At 135° the light end sits in the top-left corner and the deeper end in the bottom-right. The halfway color is #43A6F0. The light stop is nearest CSS skyblue and lightskyblue; the deeper stop is nearest dodgerblue and royalblue. Neither is an exact match, so copy the hex codes.
Change the angle slider to 90° for a left-to-right band, or to 180° for a vertical sky. Switch Type to Radial and the angle control turns off: the light blue then glows from the center.
Text on a blue gradient
The two stops behave differently, so check both:
- Black text: 11.31:1 on the light end and 5.43:1 on the deeper end. Black passes AA for normal text over the whole gradient, and at the halfway color it measures 7.95:1.
- White text: 1.85:1 on the light end and 3.86:1 on the deeper end. That fails AA for body text everywhere, and it passes the large-text level of 3:1 only toward the deeper end. At the halfway color white measures 2.64:1, which fails even that.
If the design calls for white lettering, use the Deeper variation. It shades each stop 35% toward black, giving #38859D and #1F539A, and white then measures 4.19:1 and 7.60:1.
Worked example
You are designing the sign-up page for a children's swim school and want a pool-water feel with a big white headline. Start from the Deeper variation, set the angle to 180°, and copy its CSS into the hero section. Set the headline at 40px bold, which counts as large text, so it needs only 3:1 and gets at least 4.19:1 everywhere. Put the smaller class times and prices on a white card, with dark text, instead of directly on the blue. For the social image, switch back to the original gradient, pick Banner 1500 × 500, press Download PNG, and use black type there.
More to try
The blue to black gradient is the choice for night scenes and dark mode, and the royal blue page lists the codes for a deeper solid blue. To pair these blues with a clean neutral, look at the light blue and white palettes.