How to change text transparency in HTML/CSS?

html

css-syntax

transparency

rgba

byAlex Kataev·Sep 4, 2024

To implement text transparency, use CSS's rgba or hsla color codes via the color property. The last value establishes the transparency level: 0 is completely transparent (invisible), while 1 is completely opaque (solid).

RGBA example:

.transparent-text {
  color: rgba(0, 0, 0, 0.5); /* Regular black but make it fashion */
}

HSLA example:

.transparent-text {
  color: hsla(0, 0%, 0%, 0.5); /* Greyscale with a hint of mystery */
}

To avoid unintentional consequences, apply the styles to the correct DOM elements like div, p, or span, in order to control text transparency only.

Clearing the Fog: Understanding RGBA & HSLA

RGBA and HSLA are mighty tools in your CSS toolbox that allow the specification of both color and transparency levels for text independent from the rest of an element.

RGBA: The RGB Reinvention

.element {
  /* Solid black, like my coffee */
  color: rgb(0, 0, 0);
  /* 50% transparent black, like my coffee when I add milk */
  color: rgba(0, 0, 0, 0.5);
}

HSLA: For Hue's Sake

.element {
  /* Solid blue, not a Monday blue but a sky blue */
  color: hsl(240, 100%, 50%);
  /* 50% transparent blue, like the sky on a misty day */
  color: hsla(240, 100%, 50%, 0.5);
}

Just a friendly reminder: The correct CSS syntax is rgba(red, green, blue, alpha) for rgba and hsla(hue, saturation, lightness, alpha) for hsla.

Tried & Tested: Pro Tips for Implementing Transparency

Always Have a Plan B: Fallback Color

Some browsers still live in the past and do not support RGBA/HSLA:

.element {
  color: #000000; /* Old browsers can't handle the spice */
  color: rgba(0, 0, 0, 0.5); /* For those who can */
}

Caution: Opacity Overload

The opacity property may change your whole element, not just the text:

.element {
  opacity: 0.5; /* Text, borders, ghost—you name it! */
}

Divide & Rule: Use Separate Classes

Create separate classes to apply rgba values, ensuring only text transparency is affected:

.transparent-class {
  color: rgba(51, 51, 51, 0.7); /* Semi-transparent text, full transparent awesomeness */
}

Font Tags: A Relic of the Past

The <font> tag is about as deprecated as a flip phone. Aim for the future, use CSS classes:

<p class="transparent-text">This is 2022, not 1995.</p>

External CSS: The Key to Clarity

Choose the path of external or internal CSS over inline styles for the sake of readability and future updates:

<!-- External CSS -->
<link rel="stylesheet" type="text/css" href="styles.css">

Catering to Grandpa: Transparency for Older Browsers

For Internet Explorer 8 and earlier, use the filter property:

.transparent-text {
  filter: alpha(opacity=50); /* Or try blowing the dust off */
}

Beyond the Basics: Advanced Text Transparency Techniques

The Art of Clipping: Background-clip Text

CSS gradients can be an extra tool for text transparency. The background-clip property defines the painting area:

.clip-text {
  background: linear-gradient(to right, red, blue);
  -webkit-background-clip: text;
  color: transparent; /* Works on Webkit browsers */
}