EN
CSS - change text opacity
3 points
In this article, we would like to show you how to change text opacity using CSS.
Quick solution:
xxxxxxxxxx
1
.element {
2
color: rgba(0, 0, 0, 0.75);
3
}
or:
xxxxxxxxxx
1
.element {
2
color: rgba(0, 0, 0, 75%);
3
}
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
1
2
<html>
3
<head>
4
<style>
5
6
.transparent-text-1 {
7
color: rgba(0, 0, 0, 0.75);
8
}
9
10
.transparent-text-2 {
11
color: rgba(0, 0, 0, 0.5);
12
}
13
14
.transparent-text-3 {
15
color: rgba(0, 0, 0, 0.3);
16
}
17
18
</style>
19
</head>
20
<body>
21
<div class="transparent-text-1">Text 1</div>
22
<div class="transparent-text-2">Text 2</div>
23
<div class="transparent-text-3">Text 3</div>
24
</body>
25
</html>
It is possible to achieve transparent text on whole element using opacity style property value, what was shown in the below example.
xxxxxxxxxx
1
2
<html>
3
<head>
4
<style>
5
6
.transparent-text-1 {
7
filter: opacity(0.75);
8
}
9
10
.transparent-text-2 {
11
filter: opacity(0.5);
12
}
13
14
.transparent-text-3 {
15
filter: opacity(0.3);
16
}
17
18
</style>
19
</head>
20
<body>
21
<div class="transparent-text-1">Text 1</div>
22
<div class="transparent-text-2">Text 2</div>
23
<div class="transparent-text-3">Text 3</div>
24
</body>
25
</html>
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
1
2
<html>
3
<head>
4
<style>
5
6
.transparent-text-1 {
7
opacity: 0.75;
8
}
9
10
.transparent-text-2 {
11
opacity: 0.5;
12
}
13
14
.transparent-text-3 {
15
opacity: 0.3;
16
}
17
18
</style>
19
</head>
20
<body>
21
<div class="transparent-text-1">Text 1</div>
22
<div class="transparent-text-2">Text 2</div>
23
<div class="transparent-text-3">Text 3</div>
24
</body>
25
</html>