Yellow gradient background
This yellow gradient goes from pale lemon chiffon in one corner to rich gold in the other. It's bright and warm, so it works for summer posts, kids' events and price stickers.
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.
Yellow 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.
Use dark text on yellow
Yellow is the lightest of the bright colours, so white text almost disappears on it. Use black or a very dark brown. To make the gradient deeper, add a third stop in orange (#ffa500). CSS yellow (#ffff00) is very harsh on screen, so softer golds usually look better.
Questions
Why can't I read white text on yellow?
White on gold has a contrast ratio of 1.4:1, far below the 4.5:1 that accessibility guidelines ask for. Black text on the same gold is well above it.
Can I make a yellow and orange gradient?
Yes. Add a colour and set it to orange (#ffa500) or dark orange (#ff8c00) at 100%.