CSS Outer Glow

CSS Outer Glow

In web design, the outer glow effect is a common decorative effect that can make elements more prominent and eye-catching on the page. The CSS box-shadow property allows us to easily create a variety of glow effects, including shadows, glows, and 3D effects. This article will detail how to achieve these effects using CSS and provide several sample code examples for your reference.

1. Basic Glow Effect

First, let’s look at a basic glow effect example. By setting the box-shadow property, we can add a simple glow effect to an element.

.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

<div class="box"></div>

In the example above, we added a 10-pixel black outer glow effect with an opacity of 0.5 to a 200×200 pixel div element. As you can see, a black shadow appears around the element, making it stand out more.

2. Multiple Outer Glow Effects

In addition to a single outer glow effect, we can also add multiple outer glow effects to elements to make them appear more three-dimensional and vivid.

.box { 
width: 200px; 
height: 200px; 
background-color: #f0f0f0; 
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 
0 0 20px rgba(0, 0, 0, 0.3), 
0 0 30px rgba(0, 0, 0, 0.1); 
} 

<div class="box"></div>

In the example above, we added three layers of outer glow to a 200×200 pixel div element: a 10px, 20px, and 30px black outer glow with gradually decreasing transparency. This creates a more three-dimensional and layered appearance.

3. Inner Glow Effect

In addition to outer glow, we can also add an inner glow to elements for a more mysterious and cool look.

.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

<div class="box"></div> 

In the example above, we add a 10-pixel black inner glow with an opacity of 0.5 to a 200×200 pixel div element. As you can see, a black shadow appears inside the element, making it look more mysterious and cool.

4. Glow Animation Effect

In addition to static outer glow effects, we can also use CSS animations to create dynamic glow effects, making elements appear more vivid and eye-catching.

@keyframes glow { 
0% { 
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
} 
50% { 
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); 
} 
100% { 
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
} 
} 

.box { 
width: 200px; 
height: 200px; 
background-color: #f0f0f0; 
animation: glow 2s infinite; 
} 

<div class="box"></div> 

In the example above, we define an animation called glow that changes the element’s outer glow from 10 pixels to 20 pixels and then back to 10 pixels over 2 seconds. By applying animation to an element, you can create a dynamic glow effect that draws the user’s attention.

5. Hover Effects

Finally, let’s look at an example of a glow effect when the mouse hovers. Using the :hover pseudo-class and the transition property, we can create a smooth transition when the mouse hovers over an element.

.box { 
width: 200px; 
height: 200px; 
background-color: #f0f0f0; 
box-shadow: 0 0 10px rgba(0, 0, 0, 0); 
transition: box-shadow 0.3s; 
} 

.box:hover { 
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 
} 

<div class="box"></div>

In the above example, we set an initial outer glow of 0 for a 200×200 pixel div element. When the mouse hovers over the element, the outer glow gradually changes to a 20-pixel black outer glow, creating a smooth transition.

Through the above examples, we can see that with the CSS box-shadow property, we can easily achieve a variety of outer glow effects, including basic outer glow, multiple outer glows, inner glow, glow animations, and hover effects. These outer glow effects can make page elements more vivid and eye-catching, adding a unique charm to web designs.