CSS shadows
CSS Shadow
In front-end development, CSS shadow is a commonly used style effect that can add three-dimensionality and aesthetics to elements. Shadow effects play an important role in web design, creating shadows for text, https://coder-cafe.com/wp-content/uploads/2025/09/images, and boxes. This article will provide a detailed introduction to CSS shadow properties and usage to help readers better master this technique.
box-shadow Property
The primary CSS property for setting shadow effects is box-shadow. By setting different property values, you can achieve different types of shadow effects. The syntax of the box-shadow attribute is as follows:
box-shadow: h-shadow v-shadow blur spread color inset;
The meanings of the various properties are as follows:
h-shadow: Required horizontal shadow position. This can be a positive, negative, or 0 number. The default value is 0.v-shadow: Required vertical shadow position. This can be a positive, negative, or 0 number. The default value is 0.blur: Optional value indicating the blur level of the shadow. This can be a positive, 0, or negative number. Larger values result in a blurrier shadow. The default value is 0.spread: Optional value indicating the size of the shadow. This can be a positive, 0, or negative number. Larger values result in a wider spread. The default value is 0.color: Optional value, indicating the shadow color. You can use a color name, hexadecimal value, or RGB value. The default is the current text color.inset: Optional value, indicating whether to use an inner shadow. If set toinset, the shadow is inner; if not, the shadow is outer. The default is outer.
Below, we’ll use some examples to demonstrate the shadow effects of different property values.
Example 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Shadow Example</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 10px 10px 10px #888888;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In the example above, we create a 200×200 pixel gray box and add a gray shadow with a horizontal and vertical offset of 10 pixels, a blur of 10 pixels, and a color of gray. When you run the page, you’ll see a gray box with a shadow effect.
Example 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Shadow Example</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 0 0 10px 10px #888888 inset;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In the example above, we create a 200×200 pixel gray box and add an inner shadow to it. By setting the inset property, the shadow will appear as an inner shadow. When you run the page, you’ll see a gray box with an inner shadow.
Multiple Shadows
In addition to setting a single shadow effect, CSS also supports multiple shadow effects. Multiple shadow effects can be achieved by separating multiple box-shadow property values with commas. Below is an example demonstrating multiple shadow effects.
Example 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Box Shadow Example</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 0 0 10px 10px #888888, 10px 10px 10px 10px #333333;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In the example above, we create a 200×200 pixel gray box and apply two shadow effects to it. The first shadow is an inner shadow, and the second shadow is an outer shadow. When you run the page, you’ll see a gray box with both inner and outer shadows.
Applications of Shadow Effects
CSS shadow effects can be widely used in web design, adding three-dimensionality to elements, highlighting key points, and improving the aesthetics of pages. Here are some common application scenarios.
Text Shadow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Shadow Example</title>
<style>
p {
font-size: 36px;
text-shadow: 2px 2px 2px #888888;
}
</style>
</head>
<body>
<p>Text Shadow Example</p>
</body>
</html>
In the example above, we add a shadow effect to the text with a horizontal and vertical offset of 2 pixels, a shadow blur of 2 pixels, and a gray color. When you run the page, you’ll see the text has a three-dimensional shadow effect.
Button Shadow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Shadow Example</title>
<style>
.button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
box-shadow: 0 0 10px 5px #007bff;
}
</style>
</head>
<body>
<button class="button">Button</button>
</body>
</html>
In the above example, we added an outer shadow effect to the button, making it appear more three-dimensional and attractive. When you run the page, you’ll see the button with the shadow effect.
Summary
As we’ve seen above, CSS shadows are a powerful style effect that can add depth and aesthetic appeal to web page elements. By setting different property values, we can achieve a variety of different shadow effects, and we can also create more complex effects using multiple shadows. In actual development, we can use CSS shadow effects to beautify web page elements and enhance the user experience. When designing a web page, the appropriate use of shadow effects can add a sense of layering and three-dimensionality, making the page look more vivid and attractive.