text-shadow opacity with currentColor in CSS

Question

I am looking for a way to give text glow effect a shadow opacity:

body {
  margin: 0;
  padding: 0;
  background-color: #222;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

pre {
  font-size: 24px;
  font-weight: 700;
  text-shadow: 0 0 8px currentColor;
}

<pre><font color="#1EFF6E">H</font><font color="#1EF379">e</font><font color="#1EE785">l</font><font color="#1EDC90">l</font><font color="#1ED09C">o</font><font color="#1EC5A7"> </font><font color="#1EB9B3">W</font><font color="#1EADBF">o</font><font color="#1EA2CA">r</font><font color="#1E96D6">l</font><font color="#1E8BE1">d</font></pre>

How can I reduce the opacity of the shadow to 0.75?

Does this answer your question? [Text shadow opacity](https://stackoverflow.com/questions/11549757/text-shadow-opacity) — John Vandivier, Nov 08 '20 at 11:27
here are a few duplicate questions: 1) https://stackoverflow.com/questions/11549757/text-shadow-opacity 2) https://stackoverflow.com/questions/44412621/css-text-shadow-opacity 3) https://stackoverflow.com/questions/31849277/text-shadow-with-opacity — John Vandivier, Nov 08 '20 at 11:27
Actually it sets the colour of the shadow to one single colour. It doesn't work with CSS's `currentColor` as asked. — 15 Volts, Nov 08 '20 at 11:29
An important question in your use case is "How is currentColor determined? Why is the color style added inline?" The hex inline currentColor will make the usual rgba solution hard to work for you. — John Vandivier, Nov 08 '20 at 11:29
@S,Goswami please review the three links above. They do not all require rgba. In particular, see this one: https://stackoverflow.com/questions/31849277/text-shadow-with-opacity — John Vandivier, Nov 08 '20 at 11:32
In my original code (not mentioned here), I had a class with text-glow, and `.text-glow { text-shadow: 0 0 4px currentColor }` highlights any coloured text elements with it's proper colour, but I think I have to specify some attribute to the text and use js to set the text colour and shadow colour and opacity... — 15 Volts, Nov 08 '20 at 11:42

score 1 · Accepted Answer · answered Nov 08 '20 at 11:53

For this case, I had to stick with a JS solution by extracting the attribute color in this case. I wanted 0.75 or 75% opacity, 75% of 255 is 191.25 which rounds to bf in base 16.

for(let _i of Array.from(document.getElementsByTagName('font'))) {
  _i.style.textShadow = `0 0 4px ${_i.getAttribute('color')}bf`
}

body {
  margin: 0 ;
  padding: 0 ;
  background-color: #222 ;
  height: 100vh ;
  display: flex ;
  justify-content: center ;
  align-items: center ;
}

pre {
  font-size: 24px ;
  font-weight: 700 ;
}

<pre><font color="#1EFF6E">H</font><font color="#1EF379">e</font><font color="#1EE785">l</font><font color="#1EDC90">l</font><font color="#1ED09C">o</font><font color="#1EC5A7"> </font><font color="#1EB9B3">W</font><font color="#1EADBF">o</font><font color="#1EA2CA">r</font><font color="#1E96D6">l</font><font color="#1E8BE1">d</font></pre>

You can add this link to your answer : https://css-tricks.com/8-digit-hex-codes/ for the others . you can also select your answer to mark it as the solution ;) — G-Cyrillus, Nov 08 '20 at 13:00

score -2 · Answer 2 · answered Nov 08 '20 at 11:21

-2

You can use rgba for this purpose:

rgba(0,0,0, 0.75)

Or whatever color you need.

answered Nov 08 '20 at 11:21

Sergey

1,000
8
19

text-shadow opacity with currentColor in CSS

2 Answers2