Use RGBA Transparency in a CSS Linear Gradient

Put transparency on the gradient’s color stops

A linear gradient can use RGBA colors to reveal a background underneath it. The alpha component describes how opaque each stop is: zero is fully transparent and one is fully opaque. Keep opacity on the colors when you want the element’s text or children to remain fully visible.

Both rgba(20, 80, 160, 0.25) and rgb(20 80 160 / 0.25) express the same color and alpha in current CSS. The first uses the familiar comma syntax; the second uses space-separated channels with a slash before alpha. Do not mix their separators within one function. MDN’s rgb reference documents rgba as an alias and the accepted forms.

Compare two opacity endpoints on a white base

This example keeps the red, green and blue channels constant and changes only alpha from twenty-five to seventy-five percent. A white background-color sits underneath the gradient. That makes the effect easy to inspect: the left side appears paler because more white shows through, while the right side displays more of the blue foreground color.

<div class="alpha-demo">
  <div class="alpha-swatch" aria-label="Blue fades from lighter to darker" role="img"></div>
  <p>The text is outside the transparent color layer.</p>
</div>

.alpha-demo { max-width: 36rem; margin: 1rem auto; color: #172554; }
.alpha-swatch {
  height: 10rem;
  background-color: #ffffff;
  background-image: linear-gradient(
    90deg,
    rgba(20, 80, 160, 0.25),
    rgba(20, 80, 160, 0.75)
  );
}

For a simple source-over calculation on a white base, the red channel at the first endpoint is 0.25 × 20 + 0.75 × 255, or 196.25 before display rounding. The matching green and blue values are 211.25 and 231.25. At the other endpoint, the approximate channels are 78.75, 123.75 and 183.75.

Those endpoint calculations describe this specified foreground and base, not a universal contrast result for the gradient. Pixels between the stops are interpolated, and changing the underlying background changes the composition. Use the rendered result when checking text contrast; do not evaluate the uncomposited RGBA stop as though it were an opaque color.

Change the base to understand the result

Replace the white background-color with #172554 and inspect the same gradient again. The transparent portions now reveal navy instead of white, so the left endpoint becomes darker rather than washed out. The gradient’s numeric alpha values have not changed. This comparison catches the mistaken assumption that a partially transparent color has one fixed visible hexadecimal equivalent.

If the element has no explicit background color, the backdrop can come from ancestors or other painted layers. A design that looked right on a white sample page may change on a dark card. Define the intended surface or test the component in each supported theme before storing a screenshot as a visual reference.

Use alpha when layering over a photograph

For a photographic background, place the transparent gradient first and the image URL second in background-image. For example, a black gradient from zero to eighty percent alpha can darken the bottom of an image while leaving its top unobscured. The ordering matters: an opaque photograph painted above the gradient would hide that gradient.

Do not set opacity: .5 on the whole card as a substitute. That makes its text, borders and descendants part of the faded element too. When you need only a decorative overlay, use alpha colors in the background or a separate pseudo-element. This keeps content visibility independent from the decorative treatment.

Know what the local generator can export

The CSS Gradient Generator accepts two opaque six-digit hexadecimal colors, a gradient type and an angle where applicable. It does not expose alpha controls or a list of arbitrary stops. Use it to choose a starting direction and color pair, then write the RGBA values manually in your stylesheet.

Test an alpha of zero and one as boundary cases. A zero-alpha stop should expose the base, while a fully opaque stop should display its own color at that endpoint. Restore the intended fractional values afterward. If the browser ignores the entire background declaration, inspect commas, parentheses and alpha syntax before changing color values.

Finally, avoid using transparency as the only explanation of a status or category. If two overlapping regions become visually similar over a new backdrop, labels or patterns can preserve the intended distinction. Alpha is a compositing control; it does not communicate the meaning of your data or replace a readable text label.

Related guides

Linear Gradient To

Solve linear gradient to with a focused other developer utilities workflow and final checks for code conversion, contrast and rendering context.

Best Linear Gradient

Learn best linear gradient: follow a focused other developer utilities workflow, then verify code conversion. Read the full guide.

W3 Linear Gradient

Step through w3 linear gradient and verify code conversion, contrast and rendering context before you use or share the result.