CSS inner glow

1. Introduction

In web design, special effects are often used to increase the appeal and interactivity of a page. One common special effect is the glow. A glow creates a shiny border around text, icons, or other elements, making them more eye-catching on the page. CSS provides a variety of ways to implement glow effects, which this article will explain in detail.

2. text-shadow Property

The text-shadow property can be used to create a glow effect around text. This property accepts one or more shadow values, each consisting of a horizontal offset, a vertical offset, a blur radius, and a color. Here is the syntax for the text-shadow attribute:

text-shadow: h-shadow v-shadow blur color; 

• h-shadow defines the horizontal offset of the shadow, which can be positive or negative. A positive value shifts the shadow to the right, while a negative value shifts it to the left.
• v-shadow defines the vertical offset of the shadow, which can be positive or negative. A positive value shifts the shadow downward, while a negative value shifts the shadow upward.
• blur defines the blur radius of the shadow, which can be positive; a value of 0 means no blur.
• color defines the color of the shadow.

Here’s an example showing how to use the text-shadow property to create a glowing text effect:

h1 {
text-shadow: 0 0 10px yellow;
}

This example adds a yellow glow to the h1 element. The blur of the shadow can be adjusted based on the blur value.

3. box-shadow Property

In addition to the text-shadow property, the CSS box-shadow property can also be used to create a glowing effect on an element. The box-shadow property is similar to the text-shadow property, but applies to the entire border of an element, not just the text.

The syntax of the box-shadow property is as follows:

box-shadow: h-shadow v-shadow blur spread color; 

• h-shadow defines the horizontal offset of the shadow, which can be positive or negative.
• v-shadow defines the vertical offset of the shadow, which can be positive or negative.
• blur defines the blur radius of the shadow, which can be positive or zero for no blur.
• spread defines the spread of the shadow, which can be positive or negative, with positive values ​​increasing the shadow’s size and negative values ​​decreasing it.
• color defines the color of the shadow.

Here’s an example showing how to use the box-shadow property to create a glow effect on a square element:

.square {
width: 200px;
height: 200px;
background-color: red;
box-shadow: 0 0 10px 5px yellow;
} 

This example adds a yellow glow effect to the .square element, with a shadow size of 10px and a spread of 5px.

4. Using Pseudo-elements to Create a Glowing Effect

In addition to using the text-shadow and box-shadow properties, you can also use pseudo-elements to create a glowing effect. By adding a shadow effect to the ::before or ::after pseudo-element, you can create a glow effect around an element.

Here’s an example showing how to use pseudo-elements to create a glow effect:

.button::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
box-shadow: 0 0 10px yellow;
z-index: -1;
}

In the example above, a yellow glow effect is added to the ::before pseudo-element of the .button element. The pseudo-element is positioned absolutely and extends beyond the entire element, and a negative z-index is set to display above the actual content.

5. Blend Modes

CSS blend modes (mix-blend-mode) can be used in conjunction with glow effects to enhance them. Blend modes define how an element is rendered, altering the way its background blends with the color of the underlying elements.

Here’s an example showing how blend modes can be used to create a glow effect:

.square {
width: 200px;
height: 200px;
background-color: red;
box-shadow: 0 0 10px 5px yellow;
mix-blend-mode: screen;
}

In the example above, a yellow glow is added to the .square element, blending it with the background using the mix-blend-mode property. By changing the value of the mix-blend-mode property, you can achieve different blending effects.

6. Summary

By using the CSS text-shadow and box-shadow properties, along with pseudo-elements and blend modes, we can create a variety of glow effects that add appeal and interactivity to web pages. These effects can be applied to text, icons, and other elements to make them stand out more clearly on the page.