I am trying to create more or less realistic looking leds with HTML and CSS. Adding a a glow to every led would be pretty straight forward if the color of the led was static. But I actually want the glow to automatically adjust to the led color. So this wouldn't work: / And please don't tell me to create a class for every color. In the end I want the leds to fade between colors, so I would have to create millions of classes.

.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0px 0px 6px 2px #ff0000;
  
  float:left;
  margin-right: 10px;
}

<div class="led" style="background-color:red"></div>
<div class="led" style="background-color:green"></div>
<div class="led" style="background-color:blue"></div>

I am trying to create more or less realistic looking leds with HTML and CSS. Adding a a glow to every led would be pretty straight forward if the color of the led was static. But I actually want the glow to automatically adjust to the led color. So this wouldn't work: https://fiddle.jshell/dwv5xxws/ And please don't tell me to create a class for every color. In the end I want the leds to fade between colors, so I would have to create millions of classes.

.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0px 0px 6px 2px #ff0000;
  
  float:left;
  margin-right: 10px;
}

<div class="led" style="background-color:red"></div>
<div class="led" style="background-color:green"></div>
<div class="led" style="background-color:blue"></div>

This is what inspired me btw: http://codepen.io/fskirschbaum/pen/MYJNaj

edit: Just an idea.. maybe we can just increase the size of the leds and make a shadow overlay inside of those leds so that it appears like the outer circle is just the "glow" and not the led itself.

• javascript
• html
• css

Share Improve this question Follow edited Jul 14, 2016 at 18:39 Forivin asked Jul 14, 2016 at 18:31 ForivinForivin 15.6k3030 gold badges118118 silver badges212212 bronze badges 9

• Why not just make a different CSS class for each LED? – Zac Commented Jul 14, 2016 at 18:34
• is given codepen example ok? fiddle.jshell/dwv5xxws/2 – Madhawa Priyashantha Commented Jul 14, 2016 at 18:35
• @Zac Because I'm planning to make the leds fade through every possible color from #000000 to #ffffff. And I don't feel like creating 16777216 classes right now. – Forivin Commented Jul 14, 2016 at 18:36
• @FastSnail Well, no. When the background color of the led is changed, I want the glow to automatically look correct. – Forivin Commented Jul 14, 2016 at 18:37
• 2 @Forivin canvas is more suitable – Madhawa Priyashantha Commented Jul 14, 2016 at 18:45

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 3

CSS Variables are still at a very early stage, but one well-established, reliable variable in CSS is currentColor - which, as its name suggests, always takes the current value of whatever color: is.

So a slight tweak to your code above will give you exactly what you want:

.led {
  width: 10px;
  height: 10px;
  background-color: currentColor;
  border-radius: 50%;
  box-shadow: 0px 0px 6px 2px currentColor;
  
  float:left;
  margin-right: 10px;
}

<div class="led" style="color:red"></div>
<div class="led" style="color:green"></div>
<div class="led" style="color:blue"></div>

For browser support of currentColor, see: http://caniuse./#feat=currentcolor

Okay, so I used JS to iterate all the elements with the class 'led', then set their box shadows to their background colours:

leds = document.getElementsByClassName('led');
for (var l = 0; l < leds.length; l++) {
    led = leds[l];
    led.style.boxShadow = '0 0 10px 1px ' + led.style.backgroundColor;
}

If you change the background colour of an element, make sure to run this code again.

It is your idea, after all ...

.led {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0px 0px 11px 3px rgba(255,255,255,0.8);
  float:left;
  margin-right: 10px;
}

<div class="led" style="background-color:red"></div>
<div class="led" style="background-color:green"></div>
<div class="led" style="background-color:blue"></div>