text shadow same as font color with transparency

Question

I have used many colors in my website and i want to apply text-shadow to all text but i want it with transparency

right now i using following code to do that

Code :

body{
    text-shadow: transparent 0 0 0, rgba(0,0,0, 0.75) 0 0 0.001px;
}

but it apply black color with transparency for example if color is red so i want text-shadow red with transparency.

any help would be appreciated.. thank you..

BoltClock · Answer 1 · 2014-09-01T06:58:12.730

1

There's no way in pure CSS to have a color value that references existing color values with an arbitrary alpha value. The closest you can get is currentColor (which text-shadow already uses as the default color), but currentColor takes the existing alpha value as well and does not allow you to specify a custom alpha value.

You will need to specify the color values again in the text shadow, so if it's red:

text-shadow: rgba(255, 0, 0, 0) 0 0 0, rgba(255, 0, 0, 0.75) 0 0 0.001px;

(I avoided using the transparent keyword as some browsers are known to interpolate gradients incorrectly using transparent.)

edited Sep 01 '14 at 06:58

answered Sep 01 '14 at 06:53

BoltClock

700,868
160
1,392
1,356

I don't want it as cross-browser , i just want it for chrome , and i want only one css hack for this not for individual colors , look what you are trying that black color text has different css for text-shadow , red color has its different css , but i want same css for all colors across my website – Dhaval Panchal Sep 01 '14 at 07:01
Even notwithstanding the idea of developing exclusively for one browser, there's no way you can do this for just Chrome, because like I said, there's *no way* to do this. Take that as you will. – BoltClock Sep 01 '14 at 07:03
actually i'm using CSS hack @media screen and (-webkit-min-device-pixel-ratio:0) {} for apply it only on webkit browser.. – Dhaval Panchal Sep 01 '14 at 07:11

score 1 · Accepted Answer · edited May 23 '17 at 12:28

1

I write small jQuery function for my solution

$("p").each(function() {
    textShadow = $(this).css("color").replace(')', ', 0.75)').replace('rgb', 'rgba');
    $(this).css('text-shadow', 'rgba(255, 0, 0, 0) 0 0 0, ' + textShadow + ' 0 0 0.001px');
});

Reference stackoverflow Question

edited May 23 '17 at 12:28

Community

1
1

answered Sep 01 '14 at 08:52

Dhaval Panchal

648
6
26

score 1 · Answer 3 · answered Jun 13 '21 at 17:40

1

Just don't specify any color:

text-shadow: 0px 0px 4px;

answered Jun 13 '21 at 17:40

DoceAzedo

342
4
12

This doesn't address the "with transparency" part. I want the same color as the text its shadowing but more transparent. – Boris Verkhovskiy Apr 10 '23 at 12:35

text shadow same as font color with transparency

3 Answers3