CSS Glow
CSS Glow
In web design, CSS Glow effect is a common design technique that can add visual appeal to page elements. By using the CSS box-shadow or text-shadow properties, you can easily create various glow effects. This article will detail how to use CSS to achieve different types of glow effects and provide sample code for your reference.
1. Using the box-shadow Property to Create Glow Effects
The box-shadow property can be used to add a shadow to an element. By adjusting parameters such as the shadow’s color, blur, and offset, you can create different types of glow effects. Here are some common glow effect examples:
1.1. Implementing a Simple Glow Effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Glow Effect</title>
<style>
.glow {
width: 200px;
height: 50px;
background-color: #f0f;
box-shadow: 0 0 10px #fff;
}
</style>
</head>
<body>
<div class="glow"></div>
</body>
</html>
Output:
In the example above, we add a simple glow effect to a div element with a white shadow and a 10px blur.
1.2. Achieve multiple luminous effects
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multilayer Glow Effect</title>
<style>
.glow {
width: 200px;
height: 50px;
background-color: #f0f;
box-shadow: 0 0 10px #fff, 0 0 20px #ff0, 0 0 30px #f00;
}
</style>
</head>
<body>
<div class="glow"></div>
</body>
</html>
Output:
In the example above, we add multiple glow effects to a div element, using three different shadows with different colors and blur levels.
1.3. Implement luminous border effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Glow Border Effect</title>
<style>
.glow {
width: 200px;
height: 50px;
border: 2px solid transparent;
border-radius: 5px;
background-color: #f0f;
box-shadow: 0 0 10px #fff, 0 0 20px #ff0, 0 0 30px #f00;
}
</style>
</head>
<body>
<div class="glow"></div>
</body>
</html>
Output:
In the above example, we created a glowing border effect for a div element by setting a transparent border and multiple shadows.
2. Glowing Text with the text-shadow Property
In addition to adding a glow effect to elements, we can also use the text-shadow property to create a glowing effect for text. Here’s some sample code:
2.1. Implementing a Simple Text Glow Effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Text Glow Effect</title>
<style>
.glow {
font-size: 24px;
color: #f00;
text-shadow: 0 0 10px #fff;
}
</style>
</head>
<body>
<p class="glow">Geek-docs.com</p>
</body>
</html>
Output:
In the example above, we add a simple glow effect to the text of a paragraph element, with a white shadow color and a 10px blur.
2.2. Create a rainbow text glow effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rainbow Text Glow Effect</title>
<style>
.glow {
font-size: 24px;
color: #f00;
text-shadow: 0 0 10px #f00, 0 0 20px #ff0, 0 0 30px #0f0, 0 0 40px #0ff, 0 0 50px #00f, 0 0 60px #f0f;
}
</style>
</head>
<body>
<p class="glow">Geek-docs.com</p>
</body>
</html>
Output:
In the example above, we implement a rainbow-colored glow effect for the text of a paragraph element by setting multiple shadow effects.
2.3. Realize the glowing effect of flashing text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blinking Text Glow Effect</title>
<style>
@keyframes blink {
0% { text-shadow: 0 0 10px #fff; }
50% { text-shadow: none; }
100% { text-shadow: 0 0 10px #fff; }
}
.glow {
font-size: 24px;
color: #f00;
animation: blink 1s infinite;
}
</style>
</head>
<body>
<p class="glow">Geek-docs.com</p>
</body>
</html>
Output:
In the above example, we created a flickering glow effect for the text of a paragraph element by setting a keyframe animation.
Conclusion
Through this article, we learned how to use the CSS box-shadow and text-shadow properties to create different types of glow effects. Whether adding a glow effect to an element or text, you can achieve it with simple CSS styles.