How to Use Transparent Colors in CSS Gradients

TIPS

On a website with a photographic background, you may want to darken only part of the image or let a colored overlay fade away toward an edge. Adding transparency to a CSS gradient makes this possible without permanently changing the photograph. The key is understanding which color becomes transparent and what sits behind it. This guide covers the CSS syntax, a practical photo-banner example, and the checks needed to keep text and controls readable.

How do you specify transparent colors in a gradient?

CSS (Cascading Style Sheets) defines the appearance of a webpage. Its linear-gradient() function creates an image whose colors transition along a straight line. You can give each color stop an alpha value, which controls opacity. A value of 0 means fully transparent, 1 means fully opaque, and 0.5 means 50% opacity. The colors or images behind a partly transparent stop then show through.

For example, rgb(16 35 56 / 0.95) displays deep navy #102338 at 95% opacity, while rgb(16 35 56 / 0) makes that same navy fully transparent. The older syntax rgba(16, 35, 56, 0.95) describes the same color and opacity as the first value. The keyword transparent also means fully transparent, but keeping the same RGB channels and changing only the alpha value makes it especially clear which color is fading. Modern CSS specifies alpha-aware color interpolation; some older rendering environments may handle transitions toward transparency differently.

This is different from setting opacity: 0.5 on the entire element. Whole-element opacity also fades any text and buttons inside it. By setting opacity only on the gradient’s color stops in background-image, you can adjust the backdrop while leaving the text and controls themselves opaque. Because a CSS gradient produces an image value, it belongs in background-image, not background-color.

Example: fade a navy overlay across a night photograph

Imagine a banner for a night-street photography workshop. Strong deep navy #102338 covers more of the photo on the left; the overlay becomes lighter near the middle and fully transparent toward the right. The intention is to give the information area a restrained background while keeping the glowing signs and streetlights visible in the photograph.

<section class="night-hero">
  <div class="night-hero__panel">
    <h2>Photograph the City at Night</h2>
    <p>Find the workshop date and what to bring.</p>
    <a class="night-hero__link" href="/events/">View workshop details</a>
  </div>
</section>

.night-hero {
  display: flex;
  align-items: center;
  min-height: 340px;
  padding: clamp(24px, 5vw, 48px);
  background-color: rgb(16 35 56);
  background-image:
    linear-gradient(
      to right,
      rgb(16 35 56 / 0.95) 0%,
      rgb(16 35 56 / 0.55) 48%,
      rgb(16 35 56 / 0) 85%
    ),
    url("/images/night-street.jpg");
  background-size: cover, cover;
  background-position: center, center;
}
.night-hero__panel {
  max-width: 420px;
  padding: 24px;
  border-radius: 12px;
  background-color: rgb(255 255 255);
  color: rgb(33 48 67);
}
.night-hero__link {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 6px;
  background-color: rgb(27 75 110);
  color: rgb(255 255 255);
  text-decoration: underline;
}
.night-hero__link:hover {
  background-color: rgb(20 57 87);
}
.night-hero__link:focus-visible {
  outline: 3px solid rgb(16 35 56);
  outline-offset: 3px;
}

In the background-image declaration, the first listed layer—the linear-gradient()—is drawn on top. The photograph in url() is the layer behind it. The gradient’s alpha is 95% at 0%, 55% at 48%, and 0% at 85%, where the photo can show without any additional navy overlay. The solid background-color is the same navy #102338, providing a fallback if the image cannot load. Replace the sample /images/night-street.jpg file path and /events/ link with real addresses on your site.

Instead of placing text directly over the variable photo, the example uses a fully opaque white #FFFFFF panel. Its text is dark blue-gray #213043. The action link uses a blue #1B4B6E background with white #FFFFFF lettering. Separating decorative transparency from the surface behind essential information keeps the text-background pair consistent even when the photo changes.

Check transparency, stacking order, and text contrast

If too much of the photograph is hidden, move the fully transparent stop farther left or lower the starting alpha from 0.95. Also check the stacking order: placing the photograph first in background-image can hide the overlay when the photo is opaque, because the first layer is on top. The background-size: cover rule fills the area by scaling and potentially cropping the image. Inspect the subject and the composition on narrow mobile screens as well as desktop.

For the opaque text panel, the contrast ratio between white #FFFFFF and dark blue-gray #213043 is about 13.39:1. The white #FFFFFF link text against its blue #1B4B6E background reaches about 9.22:1, and about 11.98:1 against the darker hover blue #143957. All exceed the 4.5:1 minimum for normal-sized text under the Web Content Accessibility Guidelines (WCAG) 2.2. The deep-navy keyboard focus outline #102338 against the white panel #FFFFFF has a contrast ratio of about 15.91:1, exceeding the 3:1 non-text contrast threshold relevant to essential interface indicators.

These measured pairs apply to the opaque panel, not automatically to text placed directly over the photo and its translucent overlay. If you put text on an image, contrast needs to be evaluated at its actual position, including when the image or layout changes. Fading a gradient over an image is also different from using background-blend-mode to apply a specified blend operation between background layers. HueRoll can help explore source colors and compare a selected color with white or black, but it does not automatically determine text contrast over a composited photograph and transparent gradient.