Red gradient background

This red gradient glows outwards from a tomato-red spot near the top left, through crimson, into dark red at the edges. Drag the centre to move the glow, then copy the CSS or download a PNG.

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

CSS

background: radial-gradient(circle at 30% 30%, #ff6347 0%, #dc143c 45%, #8b0000 100%);

Tailwind class

[background:radial-gradient(circle_at_30%_30%,_#ff6347_0%,_#dc143c_45%,_#8b0000_100%)]

PNG size

Width

Height

1920 × 1080 px

At a glance

CSS named colour red: #ff0000; Source: w3.org, checked 2026-11
CSS named colour tomato: #ff6347; Source: w3.org, checked 2026-11
CSS named colour crimson: #dc143c; Source: w3.org, checked 2026-11
CSS named colour darkred: #8b0000; Source: w3.org, checked 2026-11
White text on crimson (#dc143c): 4.9:1, which passes the 4.5:1 WCAG AA minimum for normal-size text; Source: w3.org, checked 2026-11
White text on tomato (#ff6347): 2.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

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

Using a red background

Red pulls the eye, so it suits a single banner, a sale announcement or a poster better than a whole page. White text works over crimson and dark red. Over the bright tomato centre it's too faint, so keep words towards the edges or move the centre away from them.

Questions

Is CSS red the same as crimson?

No. CSS red is #ff0000, pure red. Crimson is #dc143c, slightly darker and cooler, and holds white text better.

Can I make it a straight red gradient instead?

Yes. Switch the type to Linear and set the angle. The three reds stay the same.