CSS Background Color Generator

CSS Background Color Generator

Choose a color with the picker or type any value – HEX, RGB, HSL, or a CSS color name – then drag the opacity slider. The preview sits on a checkerboard, so you can see exactly how transparent the background becomes, and the CSS updates with every change.

What the generated CSS contains

For a fully opaque color you get a single, clean declaration:

.element {
  background-color: #D10505;
}

When the opacity is below 100%, the generator writes two declarations: a solid HEX fallback first and the RGBA value second. Every browser that understands RGBA uses the second line, and very old browsers or email clients that do not simply keep the solid color instead of showing nothing.

HEX, 8-digit HEX, RGBA, or HSLA?

• HEX (#D10505) is the most common notation in design tools and style guides.
• 8-digit HEX (#D10505CC) adds the alpha channel as the last two digits. It is compact and supported by all modern browsers.
• RGBA (rgba(209, 5, 5, 0.8)) is the most widely supported way to add transparency.
• HSLA (hsla(0, 95%, 42%, 0.8)) is easiest to tweak by hand: change the lightness to create hover and pressed states.

Click any value under the preview to copy it.

Opacity vs. a transparent background

The CSS opacity property makes an element and all of its children transparent, including text. A translucent background-color only affects the background, so text stays crisp. That is why overlays, modal backdrops, and cards over images use RGBA or 8-digit HEX backgrounds.

Tips

Keep enough contrast between text and background (WCAG recommends 4.5:1 for body text). To build matching lighter and darker shades, use the Tint and Shade Generator; to convert a value you already have, try HEX to RGB.