How to Use RGBA Colors in CSS

Use rgba(red, green, blue, alpha) to set a color with transparency. The red, green, and blue channels use values from 0 to 255, while alpha ranges from 0 (fully transparent) to 1 (fully opaque). For example:

.notice {
  background-color: rgba(20, 80, 160, 0.5);
}

Modern CSS also supports slash-alpha syntax: rgb(20 80 160 / 50%). The familiar rgba() spelling is still valid; it is a legacy alias of rgb(). MDN’s rgb() reference and the CSS Color Module Level 4 document both forms.

1. Understand the four values

The traditional comma-separated form is rgba(red, green, blue, alpha):

Red, green, blue: Numeric channel values commonly range from 0 to 255. For example, rgba(255, 0, 0, ...) starts with red.
Alpha: A number from 0 to 1, or a percentage from 0% to 100%. Zero is invisible; one or 100% is opaque. An alpha of 0.5 is half alpha.

Alpha is not a 0–255 channel in this syntax. It describes how opaque the color is. At intermediate values, the rendered color blends with whatever is behind it.

/* Fully transparent black */
background-color: rgba(0, 0, 0, 0);

/* Half-alpha blue */
color: rgba(0, 0, 255, 0.5);

/* Lightly tinted yellow */
background-color: rgba(255, 200, 0, 0.15);

/* Fully opaque red */
background-color: rgba(255, 0, 0, 1);

2. Choose a syntax

For new stylesheets, the space-separated rgb() form with a slash before alpha makes the channel/alpha boundary clear. Use the comma-separated rgba() form when matching an existing codebase or when its support needs guide the choice. Check the browser support requirements for your project before relying on newer color syntax; MDN links compatibility data from its reference.

Format	Example	When it fits
Legacy comma syntax	`rgba(20, 80, 160, 0.5)`	Readable, familiar syntax; useful in existing CSS.
Modern slash-alpha syntax	`rgb(20 80 160 / 50%)`	Modern CSS color syntax with alpha separated by a slash.
Hex with alpha	`#ff000080`	Compact when the project already uses hex tokens.

In #RRGGBBAA, the final byte is alpha: 00 is transparent and ff is opaque. For example, #ff000080 is an approximate half-alpha red. See MDN’s hex-color reference. Prefer the notation your team can read and maintain consistently.

Do not mix the legacy commas with modern slash notation. Write either rgba(20, 80, 160, 0.5) or rgb(20 80 160 / 50%).

3. Make only the background translucent

When a panel should be translucent but its text should remain opaque, apply alpha to the background color itself:

.card {
  background-color: rgb(15 25 40 / 85%);
  color: white;
}

Avoid setting opacity on the whole element for this effect. Element opacity affects the element’s rendered contents too, including its text and child elements. A transparent background also reveals the page behind it, so check that the text remains readable over the backgrounds where the component can appear.

4. Apply RGBA in a runnable page

Save the following as index.html and open it in a browser. The card background is translucent while the text stays opaque; the page’s gradient makes the blending visible.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RGBA example</title>
<style>
  body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    font: 1rem/1.5 system-ui, sans-serif;
    background: linear-gradient(120deg, #f0a, #05c);
  }

  .card {
    max-width: 28rem;
    margin: 2rem;
    padding: 1.5rem;
    border-radius: 0.75rem;
    background-color: rgba(15, 25, 40, 0.85);
    color: white;
  }
</style>
<main class="card">
  <h1>Translucent background</h1>
  <p>The panel lets some of the page show through while its text stays opaque.</p>
</main>
</html>

To use modern syntax, replace the card’s background declaration with background-color: rgb(15 25 40 / 85%);.

5. Troubleshoot common mistakes

Symptom	Likely cause	Fix
The color is completely invisible.	Alpha is `0`, or the background behind the element looks similar.	Increase alpha toward `1` (or 100%) and check the result against the actual page background.
The text and children look faded.	`opacity` is applied to the whole element.	Remove element opacity and put alpha on the specific `background-color` value.
The declaration is invalid.	Comma-separated and slash-alpha syntax were mixed, or separators are missing.	Use a complete form: `rgba(20, 80, 160, 0.5)` or `rgb(20 80 160 / 50%)`.
The result is unexpectedly opaque.	Alpha is `1` or `100%`, or alpha was omitted from an RGB value.	Use an alpha below one, such as `0.5` or `50%`. Without alpha, the color is opaque.
A newer syntax does not work in a target browser.	The project’s browser support matrix may not include that syntax.	Check the target browsers’ compatibility data and choose a supported form, such as the established comma-separated `rgba()` notation.
A translucent color looks different across backgrounds.	Alpha blends the color with the content behind it.	Test over each intended background or use an opaque color when the appearance must stay constant.

6. Inspect the rendered result

For a page you own, use the browser’s developer tools to inspect the computed background-color and compare the component against its real backgrounds. A screenshot can help review the rendered result across a page or viewport.

ScreenshotNeo is a website screenshot API and MCP server for developers. It can capture PNG, JPEG, WebP, or PDF, and supports full-page or selected-element captures among its options. Its output can help you inspect how translucent styles render in context.

Or skip the browser setup

Make one GET request to capture a page. See the ScreenshotNeo API documentation for request details and available options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Cookie banners are accepted and removed before capture; more than 60 known consent platforms, newsletter popups, and chat widgets can be removed, and each step can be turned off.
Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing. Response headers report the page verdict and whether the capture was billed.
An MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs.
1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000 shots. Every feature is on every plan.

Create a free ScreenshotNeo account to get 1,000 screenshots a month with no card.

Performance, reliability, and cost notes

RGBA is a built-in CSS color notation; it does not require an image asset or an external library. Pick alpha based on the visual result and verify contrast on the real backgrounds. For a screenshot review workflow, avoid treating a failed or blocked page as evidence that the CSS is wrong: check the captured page and response verdict, then retry or inspect the page directly as needed.

ScreenshotNeo’s free plan includes 1,000 shots per month. Paid tiers are Starter at $5 for 3,000, Growth at $15 for 15,000, Pro at $39 for 60,000, Scale at $99 for 250,000, and Business at $249 for 1,000,000; yearly billing gives two months free. Caching has a configurable TTL, and cache hits are not billed. Bulk capture supports 100 URLs per call, and asynchronous jobs can use signed webhooks. Use the usage API to track consumption; response headers identify billing status.

FAQ

Is `rgba()` still valid CSS?

Yes. It remains accepted as the legacy alias of rgb(); it has not been removed.

What does the fourth value mean in `rgba()`?

It is alpha: 0 is fully transparent and 1 is fully opaque. Percentages from 0% to 100% can also express alpha.

What happens if alpha is omitted?

The color is opaque.

Can I make a transparent background without fading the text?

Yes. Set alpha in background-color, and leave the element’s opacity unset.

Can alpha be written as a percentage?

Yes. For example, rgb(20 80 160 / 50%) uses 50% alpha.