Skip to content

Navy blue gradient background

This navy gradient glows up from midnight blue at the bottom centre, through navy, into black at the top corners. It's deep and formal, a good fit for corporate slides, event invites and night-sky designs.

Free, no sign-up. Runs in your browser. Nothing you type or upload is sent to us or stored.

At a glance

CSS named colour navy
#000080
Source: w3.org, checked 2026-11
CSS named colour midnightblue
#191970
Source: w3.org, checked 2026-11
White text on navy (#000080)
16:1, which passes the 4.5:1 WCAG AA minimum for normal-size text
Source: w3.org, checked 2026-11
White text on midnightblue (#191970)
14.8:1, which passes the 4.5:1 WCAG AA minimum for normal-size text
Source: w3.org, checked 2026-11

Want a page that already looks finished?

A free Liite page comes with 15 themes, from soft sunset tones to plain black and white, plus gradient and pattern wallpapers of your own. Pick one, add your links, and your page is live at liite.co/yourname.

Make your free page

Navy blue gradient background: what to know

This page starts the background generator for this case. For every option and how to use it, see the background generator.

Pairing colours with navy

Navy takes white text easily and pairs well with gold or warm orange accents. Because it's so dark, a slow navy fade can band on big screens; this preset adds light grain to hide it. For a lighter navy, move the first stop to royal blue (#4169e1).

Questions

What is the hex code for navy blue?

CSS navy is #000080. midnightblue (#191970) is slightly lighter and less saturated.

Is navy good for a presentation background?

Yes, if your text is white or very light. Download it at 1920 × 1080, the default custom size here, for a 16:9 slide.