Blue to black gradient: navy fade CSS and PNG downloads
This blue to black gradient fades from deep navy (#1E3C72) at the top to pure black (#000000) at the bottom. Copy the CSS or download a PNG. White text passes everywhere on it, at 10.79:1 on the navy and 21.00:1 on the black.
background-color: #1e3c72;
background-image: linear-gradient(180deg, #1e3c72 0%, #000000 100%);Variations
Reversed
#000000 → #1E3C72Softer
#6D80A3 → #595959Deeper
#14274A → #000000Radial glow
#1E3C72 → #000000
On this page
Going from blue to black feels like the sky after sunset, or like deep water. Compared with a pure gray-to-black fade, the navy start gives a cool, slightly rich mood, which is why this pairing is common in dark-mode apps, night-sky posters, streaming overlays and tech presentations.
How the gradient is built
The CSS is linear-gradient(180deg, #1e3c72 0%, #000000 100%). At 180° the navy sits at the top and the black at the bottom, so the page darkens as you scroll down and text near the footer gets the strongest contrast. The color halfway between the two stops is #0F1E39, a very dark blue that still keeps a hint of hue.
The navy is a dark, moderately saturated blue. The closest CSS names are darkslateblue (#483D8B) and midnightblue (#191970), but both are more purple than this stop, so CSS has no true match for it. The black end is exactly CSS black.
Try different angles with the slider. At 135° the fade runs corner to corner, which looks more like a light source than a horizon. In Radial mode the navy glows in the middle and fades to black at the edges, a good effect behind a centered logo.
Text on a blue to black gradient
White text is the natural choice: 10.79:1 on the navy, 16.59:1 at the halfway color, and 21.00:1 on the black. Every point clears AAA for normal text. Black text is the opposite, with 1.94:1 and 1.00:1.
The Softer variation mixes each stop 35% toward white and gives #6D80A3 and #595959. White on those measures 3.98:1 and 7.00:1, so the lighter end no longer passes for body text, only for large headings. If the aim is a gentler look, keep the original colors for any copy and use the softer one only as a decorative band.
Worked example
You are designing the login screen for a note-taking app that has a dark theme. Choose Phone 1170 × 2532, keep 180°, and download the PNG as a quick background mock-up for your design file. Put the app name in white at the top, where the navy starts. Make the email and password fields lighter than the background, with white 1px borders: borders and other interface parts need only 3:1 against what is next to them, and white clears that by a wide margin. Put the main button in a light color with black text so it stands out, instead of another dark blue.
Related pages
A neutral version of this fade is on the black gradient page. For brighter blues, see the blue gradient, and for a stand-alone dark blue code, the royal blue page.