[Edit]

CSS - change text opacity

1 contributors

2 contributions

0 discussions

3 points

Created by:

Saim-Mccullough

688

In this article, we would like to show you how to change text opacity using CSS.

Quick solution:

xxxxxxxxxx
 
.element {
    color: rgba(0, 0, 0, 0.75);
}

or:

xxxxxxxxxx
 
.element {
    color: rgba(0, 0, 0, 75%);
}

Practical example

Edit

To set semi transparent text, we use rgba() colors where a is alpha value that sets the opacity. The alpha value can be number from 0 - 1 (or percentage value 0% - 100%).

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
    
    .transparent-text-1 {
        color: rgba(0, 0, 0, 0.75);
    }
​
    .transparent-text-2 {
        color: rgba(0, 0, 0, 0.5);
    }
​
    .transparent-text-3 {
        color: rgba(0, 0, 0, 0.3);
    }
​
  </style>
</head>
<body>
  <div class="transparent-text-1">Text 1</div>
  <div class="transparent-text-2">Text 2</div>
  <div class="transparent-text-3">Text 3</div>
</body>
</html>

Auto running

Alternative solution 1

Edit

It is possible to achieve transparent text on whole element using opacity style property value, what was shown in the below example.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
    
    .transparent-text-1 {
        filter: opacity(0.75);
    }
​
    .transparent-text-2 {
        filter: opacity(0.5);
    }
​
    .transparent-text-3 {
        filter: opacity(0.3);
    }
​
  </style>
</head>
<body>
  <div class="transparent-text-1">Text 1</div>
  <div class="transparent-text-2">Text 2</div>
  <div class="transparent-text-3">Text 3</div>
</body>
</html>

Auto running

Alternative solution 2

Edit

In this section you can find solution that sets opacity on whole element. This approach has great legacy (it works in very old web browsers).

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
    
    .transparent-text-1 {
        opacity: 0.75;
    }
​
    .transparent-text-2 {
        opacity: 0.5;
    }
​
    .transparent-text-3 {
        opacity: 0.3;
    }
​
  </style>
</head>
<body>
  <div class="transparent-text-1">Text 1</div>
  <div class="transparent-text-2">Text 2</div>
  <div class="transparent-text-3">Text 3</div>
</body>
</html>