How to change text transparency in HTML/CSS?

Question

I'm very new to HTML/CSS and I'm trying to display some text as like 50% transparent. So far I have the HTML to display the text with full opacity

<html><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></html>

However, I'm not sure how to change its opacity. I've tried looking online, but I'm not sure exactly what to do with the code I find.

score 323 · Accepted Answer · edited Jul 04 '22 at 22:05

323

opacity applies to the whole element, so if you have a background, border or other effects on that element, those will also become transparent. If you only want the text to be transparent, use rgba.

#foo {
    color: #000; /* Fallback for older browsers */
    color: rgba(0, 0, 0, 0.5);

    font-size: 16pt;
    font-family: Arial, sans-serif;
}

Also, steer far, far away from <font>. We have CSS for that now.

edited Jul 04 '22 at 22:05

upe

1,862
1
19
33

answered May 31 '12 at 14:43

Mattias Buelens

19,609
4
45
51

9

A far superior solution compared to the accepted answer, IMO. You do not need to add an additional span element to the HTML to apply opacity solely to the text. – kinsho Aug 11 '14 at 18:27
This is the solution. – GhitaB Nov 13 '14 at 14:58
what browsers are "old" in this sense? – Rick Davies Jan 19 '15 at 18:43
1

@RickDavies According to [caniuse.com](http://caniuse.com/#feat=css3-colors), IE9 or higher is required. If you need to support IE8, you still need the fallback. Otherwise, you should be fine with just `rgba`. – Mattias Buelens Jan 19 '15 at 20:12
Hmmmm, neither is the opacity property. Wow. – trusktr Jun 04 '15 at 19:18
It works here on this site when I do it via inspector, but not on my local test site. Weird. And the property isn't overriden. Whaaaaaaaaat. – trusktr Jun 04 '15 at 19:19
Wait, it's because opacity isn't allowed on the `:visited` pseudo class? What?!? I never knew. I think that's lame. – trusktr Jun 04 '15 at 19:22
@trusktr Modern browsers place those limits to protect the user's privacy, [see MDN for an explanation](https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector). You can still use `rgba` for `:visited` rules but you can only change the red, green and blue components. The alpha component is always taken from the *non-visited* style. (Also, your comment is a bit off-topic. It might be better as a separate question, and it would also be more visible to other answerers.) – Mattias Buelens Jun 04 '15 at 20:54
@MattiasBuelens I found that article, but I think that rather than preventing us from styling :visited, a better approach would be to prevent getComputedStyles() from returning any meaningful information information thieves. Then we could style to our heart's content. – trusktr Jun 06 '15 at 07:02
this does not worked for me, while setting `color: rgba(0, 0, 0, 0.0)` on a `
` element. the reason was that for body{} was also a color set which then was displayed instead the color of the
. removing the color definition in body{} worked in the end.
– Christoph Lösch Nov 23 '16 at 20:09
Just a note: this solution changes not only opacity but the color as well. – Eugene Kardash Apr 27 '17 at 02:39
@vchrizz To override previously set rule use " !important" keyword. example: `color: rgba( 0, 255, 0, 0.5) !important` – Eugene Kardash Apr 27 '17 at 02:43

Mario Corchero · Answer 2 · 2014-12-21T18:28:30.740

116

Check Opacity, You can set this css property to the div, the <p> or using <span> you want to make transparent

And by the way, the font tag is deprecated, use css to style the text

div {
    opacity: 0.5;
}

Edit: This code will make the whole element transparent, if you want to make ** just the text ** transparent check @Mattias Buelens answer

edited Dec 21 '14 at 18:28

answered May 31 '12 at 14:25

Mario Corchero

5,257
5
33
59

35

This answer is incorrect. Its code makes entire element (div) translucent. The Question specified only the text. The higher-voted [sibling answer](http://stackoverflow.com/a/10835846/642706) should be the accepted one. – Basil Bourque Dec 19 '14 at 02:37
Thank you. It really helped me hiding a text in my wordpress template. Instead of (opacity: 0.5;) I just used (opacity:0;). – Marcielli Oliveira Jan 07 '16 at 14:57

score 19 · Answer 3 · answered Dec 02 '14 at 16:30

Just use the rgba tag as your text color. You could use opacity, but that would affect the whole element, not just the text. Say you have a border, it would make that transparent as well.

.text
    {
        font-family: Garamond, serif;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.5);
    }

score 12 · Answer 4 · answered May 31 '12 at 14:29

Your best solution is to look at the "opacity" tag of an element.

For example:

.image
{
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

So in your case it should look something like :

<html><span style="opacity: 0.5;"><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></html>

However don't forget the tag isn't supported in HTML5.

You should use a CSS too :)

score 6 · Answer 5 · edited Apr 19 '17 at 18:34

What about the css opacity attribute? 0 to 1 values.

But then you probably need to use a more explicit dom element than "font". For instance:

<html><body><span style=\"opacity: 0.5;\"><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></span></body></html>

As an additional information I would of course suggest you use CSS declarations outside of your html elements, but as well try to use the font css style instead of the font html tag.

For cross browser css3 styles generator, have a look at http://css3please.com/

score 4 · Answer 6 · edited Jul 05 '22 at 23:50

4

Easy! after your:

<font color=\"black\" face=\"arial\" size=\"4\">

add this one:

<font style="opacity:.6">

you just have to change the ".6" for a decimal number between 1 and 0

edited Jul 05 '22 at 23:50

upe

1,862
1
19
33

answered Dec 04 '13 at 19:14

user3067297

57
1
1

score 3 · Answer 7 · answered Feb 19 '15 at 10:29

There is no CSS property like background-opacity that you can use only for changing the opacity or transparency of an element's background without affecting the child elements, on the other hand if you will try to use the CSS opacity property it will not only changes the opacity of background but changes the opacity of all the child elements as well. In such situation you can use RGBA color introduced in CSS3 that includes alpha transparency as part of the color value. Using RGBA color you can set the color of the background as well as its transparency.

score 3 · Answer 8 · answered Apr 10 '22 at 16:23

Relative color syntax

With this new CSS ability (css-color-5) which allows color format transformations, it also will also allow adding opacity to any color in any format, for example, to RGB (relative transformations can be done to any other format):

html { --color: blue } /* assume some sort of a base color variable */
.foo { color: rgb(from var(--color) r g b / 50%) } /* convert the color variable to RGB+A */

(As of writing, not yet available in browsers. Will update once arrvies)

score 2 · Answer 9 · answered Sep 10 '18 at 20:07

2

try to play around with mix-blend-mode: multiply;

color: white;
background: black;
mix-blend-mode: multiply;

MDN

tutorial

answered Sep 10 '18 at 20:07

Dmitry Grinko

13,806
14
62
86

score 1 · Answer 10 · edited Dec 06 '20 at 19:35

1

If you use opacity to a element, entire element effect that(background+other things in it),you can use mix-blend-mode to the CSS attributes of the specific element,

Refer these sites:

https://css-tricks.com/almanac/properties/m/mix-blend-mode/

https://css-tricks.com/basics-css-blend-modes/

edited Dec 06 '20 at 19:35

User1010

789
1
6
19

answered Dec 06 '20 at 15:22

wmpn

11
2

How to change text transparency in HTML/CSS?

10 Answers10

Relative color syntax

Linked

Related