Skip to content

Gray gradient background

This grey gradient fades from light gainsboro at the top to mid grey at the bottom. Grey keeps the attention on what sits in front of it, so it suits product photos, slides and app screens.

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 gray
#808080
Source: w3.org, checked 2026-11
CSS named colour grey
#808080
Source: w3.org, checked 2026-11
CSS named colour gainsboro
#dcdcdc
Source: w3.org, checked 2026-11
CSS named colour darkgray
#a9a9a9
Source: w3.org, checked 2026-11
Black text on gray (#808080)
5.3:1, which passes the 4.5:1 WCAG AA minimum for normal-size text
Source: w3.org, checked 2026-11
White text on gray (#808080)
3.9:1, which falls short of 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

Gray 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.

Gray or grey

CSS accepts both spellings, and both give the same #808080. Oddly, CSS darkgray (#a9a9a9) is lighter than plain gray. Dark text stays readable over the whole of this gradient. White text only reads over darker greys, so darken the bottom stop if you need it.

Questions

Is grey written gray or grey in CSS?

Either. gray and grey are both valid named colours with the same value, #808080, and so are pairs such as darkgray and darkgrey.

How do I make a lighter grey gradient?

Move the bottom colour towards white, for example to #dcdcdc or #f5f5f5. Closer colours give a subtler fade.