Remove Unused CSS

Check how much unused CSS you have on your website:

Quick & free. No signup needed.

CSS Outer Glow

Example of CSS Outer Glow

CSS offers a very powerful property of box-shadow. It enables developers to simulate the drop-shadows - as if our HTML elements are in a true 3D space and can be moved along the z-axis to rise above the background content or submerge in it.

Let’s visualize it by considering the following example. We have two buttons in our view. One is without a box-shadow while the other has it. It can be observed that without a box-shadow, the entire perspective remains 2D as if a button is drawn with a pencil on paper. But with a box-shadow, our brains start to process the view as a 3D perspective. We feel as if the box is a true 3D element, placed or hovering above a true 3D plane. This is the power of box-shadow.

A box-shadow is described by

You can explore the details of these properties and experiment with them on the MDN resource page.

Now that we have a brief introduction to the world of box-shadows, we will pay attention to the main topic of this article - outer glow. 

The glowing effect is observed when an element radiates steady light around the edges of its body. For example, the effect that can be seen around the edges of the button in the following example.

Simple Glow
Unused CSS

Let’s create this effect using box-shadow.

Firstly, we will create a black container as glow stands out with a dark background. We will center its content in both dimensions. The content will, in our case, be just a text in a box. We call it simply a card.

<div class="parent">
  <h4>Simple Glow</h4>
  <div class="card">
    <p>Unused CSS</p>
  </div>
</div>
.parent {
  padding: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: black;
  color: white;
  text-align: center;
}
.card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 180px;
  padding: 1.5rem;
  margin-top: 25px;
  background: white;
  color: #48abe0;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
}
Simple Glow
Unused CSS

We have our card centered in a dark container and the only thing left is the outer glow.

Interestingly, the outer glow is only 1 line of CSS away.

.card {
  // rest of the styles
  box-shadow: 0 0 50px 15px #48abe0;
}
Simple Glow
Unused CSS
Try this box-shadow in our editor

Note that our overall color scheme, and values for spread and blur radii of the box-shadow matter the most in creating this effect. With the right calibration of these values, we were able to leverage box-shadows to mimic the effect of glowing.

CSS supports the rendering of multiple shadows using a comma-separated list. The shadows are rendered front-to-back in the order of declaration. So the first shadow in the list will be on the front.

Let’s update the box-shadow in the above example to render multiple shadows.

.card {
  // …
  box-shadow: 0 0 10px 5px #48abe0,
              0 0 20px 7px #ebecca,
              0 0 25px 20px #8a2be2,
              0 0 30px 25px #ff1493;
}

Multiple Glows

Unused CSS
Try this box-shadow in our editor

Text Glow

CSS offers another great property that can be leveraged to create glowing effects of texts. The text-shadow property. Consider the following example of text-glow.

Unused CSS
Try this text-shadow in our editor

Let’s build it from scratch.

<div class=”wrapper”>
 <h2 class=”glow”>Unused CSS</h2>
</div>
.wrapper {
 font-family: sans-serif;
 padding: 10rem;
 display: flex;
 justify-content: center; 
 background-color: white;
}
.glow {
 color: white;
 text-shadow: rebeccapurple 0 0 10px;
}

As seen, the glow was added easily using one line of CSS - the text-shadow.

text-shadow: rebeccapurple 0 0 10px;

We can even apply transitions to box-shadow and text shadows to create eye-catching effects. Such transitions can mimic Neon Signs.

Let’s animate into our above examples, a transition of text-shadow colors. Note that we need to set the same shadow in the initial (0% frame) and final (100% frame) state of the animation. Otherwise, we will see a glitch as the final shadow color will immediately change to the initial shadow color when the animation loop resets.

 @keyframes shadows {
 0% { text-shadow: #48abe0 0 0 10px; }
 50% { text-shadow: blueviolet 0 0 10px; }
 75% { text-shadow: rebeccapurple 0 0 10px;}
 100% { text-shadow: #48abe0 0 0 10px; }
}
h2 {
 // ...
 animation: shadows 2s infinite
}

A transition of text-shadow colors

The same applies to box shadows. Following codepen demonstrates both, outer and text glow, and their animation.

<div class="parent">

  <div class="glow-item">
    <h4>Simple Glow</h4>
    <div class="card">
      <p>Unused CSS</p>
    </div>
  </div>

  <div class="glow-item multi-glow">
    <h4>Multi Glow</h4>
    <div class="card">
      <p>Unused CSS</p>
    </div>
  </div>

  <div class="glow-item">
    <h4>Glow on Hover</h4>
    <div class="card reactive">
      <p>Unused CSS</p>
    </div>
  </div>

  <div class="glow-item">
    <h4>Transition</h4>
    <div class="card shadow-animate">
      <p>Unused CSS</p>
    </div>
  </div>
</div>
body {
  font-family: sans-serif;
  background-color: black;
}

.parent {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.parent h4 {
  color: white;
  margin-top : 0;
}

.glow-item {
  text-align: center;
  margin: 30px 100px;
}

.card {
  width: fit-content;
  height: fit-content;
  padding: 0.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  color: #48abe0;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 0 50px 15px #48abe0;
}

.card.reactive {
  box-shadow: none;
}

.card.reactive:hover {
  box-shadow: 0 0 50px 15px #48abe0;
}

.multi-glow .card {
  box-shadow: 0 0 10px 5px #48abe0,
              0 0 20px 7px #ebecca,
              0 0 25px 20px #8a2be2,
              0 0 30px 25px #ff1493;
}

.card.shadow-animate {
  box-shadow: 0px 0px 20px 10px #48abe0;
  animation: shadows 1.5s infinite;
}

@keyframes shadows {
  0% {
    text-shadow: #48abe0 0 0 10px;
    box-shadow: 0px 0px 20px 10px #48abe0;
  }
  50% {
    text-shadow: blueviolet 0 0 10px;
    box-shadow: 0px 0px 20px 10px blueviolet;
  }
  75% {
    text-shadow: rebeccapurple 0 0 10px;
    box-shadow: 0px 0px 20px 10px rebeccapuprle;
  }
  100% {
    text-shadow: #48abe0 0 0 10px;
    box-shadow: 0px 0px 20px 10px #48abe0;
  }
}

Examples

A glowing login card.

See the Pen Simple cyan log-in page by Usiph (@USIPH) on CodePen.

Futuristic cards.

See the Pen Futuristic Card Designs by Sebastian Alvarez (@immrseabass) on CodePen.

Glowing social medial icons.

See the Pen CSS Glowing Icons · BEM Method · FontAwesome Kit Code - No Bootstrap by Esther White (@esteecodes) on CodePen.

Buttons with neon effect.

See the Pen Button neon effect by Salih Benlalla (@salihbenlalla) on CodePen.

Transitioning glow on text - An effect useful for navigating the user’s focus.

See the Pen Text Effect --15 --Glow Effect by kiran raj r (@kiran-r-raj) on CodePen.

Conclusion

Box-Shadow and Text-Shadow are very useful properties. Using the right calibration of values, we can create attractive glow effects that can navigate users’ focus while adding to the stylistic beauty of our web pages.