Blue gradient background
This blue gradient runs from royal blue through dodger blue to sky blue at a 135° angle. Use it as it is or shift the shades, then copy the CSS for a web page or save it as a PNG.
Free, no sign-up. Runs in your browser. Nothing you type or upload is sent to us or stored.
At a glance
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.
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.
Text on a blue gradient
White text reads well on the royal blue corner but not on the lighter sky blue end. Put headings at the top left, or use dark text over the light end. For a darker, calmer blue, swap the last stop for navy (#000080).
Questions
Which blue is CSS blue?
The named colour blue is #0000ff, a very saturated blue. Most designs use softer blues such as royal blue (#4169e1) or dodger blue (#1e90ff), as this gradient does.
Can I use this blue gradient as a PNG?
Yes. Pick a social size or type your own width and height, then press Download PNG. It's drawn in your browser from the same colours as the CSS.