CSS inner glow effect
CSS Inner glow effect
box-shadow: inset x-offset y-offset blur spread color;
inset: Specifies the inner shadow effect.x-offset: Sets the horizontal distance of the shadow from the left border. This value can be negative.y-offset: Sets the vertical distance of the shadow from the top border. This value can be negative.blur: Sets the blur radius of the shadow. A larger value results in a blurrier shadow.spread: Sets the size of the shadow.color: Sets the color of the shadow.
2. Implementing the Inner Glow Effect
2.1 Using a Single Inner Glow Effect
First, let’s implement the inner glow effect on an element using the following sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inner Glow Effect</title>
<style>
.inner-glow {
width: 200px;
height: 100px;
background-color: #f0f0f0;
box-shadow: inset 0 0 10px 0 #09f;
}
</style>
</head>
<body>
<div class="inner-glow"></div>
</body>
</html>
In the above code, we create an element with a width of 200px and a height of 100px and set its background color to gray. By setting the box-shadow property, we achieve a blue inner glow effect. In box-shadow, the inset keyword indicates an inner shadow effect, 0 0 specifies a zero distance from the left and top borders, 10px specifies a 10px blur radius, and #09f specifies a blue shadow color.
2.2 Using Multiple Inner Glow Effects
In addition to using a single inner glow effect, we can also achieve multiple inner glow effects by setting multiple box-shadow properties with different parameters. Here’s a sample code using multiple inner glow effects:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inner Glow Effect</title>
<style>
.multiple-inner-glow {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: inset 0 0 10px 0 #09f,
inset 0 0 20px 5px #f90,
inset 0 0 30px 10px #0c0;
}
</style>
</head>
<body>
<div class="multiple-inner-glow"></div>
</body>
</html>
In the above code, we create an element with a width of 200px and a height of 200px and set a gray background. By setting multiple box-shadow properties, we achieve three inner glow effects of different colors and sizes. Each box-shadow property is separated by a comma.
3. Summary
Through this article, we learned how to use the CSS box-shadow property to create an inner glow effect. Inner glow effects can add a decorative touch to web elements, making them more dynamic and engaging. You can adjust the shadow size, blur radius, and color to create an inner glow effect that suits your design style.