Setting shadows with CSS
Setting Shadows with CSS
In web design, shadows are a common decorative effect that can make elements appear more three-dimensional and vivid. CSS provides a variety of ways to set shadows. This article will detail how to use CSS to achieve different types of shadows.
1. Box-shadow Property
The box-shadow property is used in CSS to set the shadow effect of an element. By setting the box-shadow property, you can achieve different types of shadow effects, including inner and outer shadows. The syntax of the box-shadow property is as follows:
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow: The horizontal shadow position, which can be a positive, negative, or 0 value.v-shadow: The vertical shadow position, which can be a positive, negative, or 0 value.blur: The blur radius. A larger value results in a blurrier shadow.spread: The size of the shadow, which can be a positive, negative, or 0 value.color: The color of the shadow.inset: Optional. If set toinset, it indicates an inner shadow; if not set, it indicates an outer shadow.
Example 1: Setting an Outer Shadow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Outer 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>
Output:
Example 2: Setting an Inner Shadow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inner Shadow Example</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: inset 10px 10px 10px #888888;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example above, we create a gray box with a width and height of 200px and set an inner shadow to the lower right. The shadow’s horizontal and vertical positions are 10px, the blur radius is 10px, and the color is gray.
2. text-shadow Property
In addition to the box-shadow property for setting shadow effects on elements, CSS also provides the text-shadow property for setting shadow effects on text. The syntax of the text-shadow attribute is as follows:
text-shadow: h-shadow v-shadow blur color;
h-shadow: The horizontal shadow position. Can be a positive, negative, or 0 value.v-shadow: The vertical shadow position. Can be a positive, negative, or 0 value.blur: The blur radius. A larger value results in a blurrier shadow.color: The shadow color.
Example 3: Setting Text Shadow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Shadow Example</title>
<style>
.text {
font-size: 24px;
text-shadow: 2px 2px 2px #888888;
}
</style>
</head>
<body>
<p class="text">Geek Docs</p>
</body>
</html>
Output:
In the above example, we create text with a font size of 24px and set a shadow effect in the lower right corner. The shadow’s horizontal position is 2px, the vertical position is 2px, the blur radius is 2px, and the color is gray.
3. Multiple Shadow Effects
In addition to setting a single shadow effect, CSS also supports multiple shadow effects. By setting multiple shadow parameters in the box-shadow or text-shadow properties, you can achieve multiple shadow effects.
Example 4: Setting Multiple Outer Shadows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple Outer Shadows Example</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 10px 10px 10px #888888, -10px -10px 10px #888888;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example above, we create a gray box with a width and height of 200px and set two outer shadow effects: one for the lower right and the other for the upper left.
Example 5: Setting Multiple Inner Shadows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple Inner Shadows Example</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: inset 10px 10px 10px #888888, inset -10px -10px 10px #888888;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the above example, we create a gray box with a width and height of 200px and set two inner shadow effects: one for the lower right and one for the upper left.
4. Shadow Transparency
In addition to setting the shadow color, CSS also supports setting the shadow’s transparency. By adding an alpha value to the color value, you can control the transparency of the shadow effect.
Example 6: Setting Shadow Transparency
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shadow Transparency Example</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the above example, we create a gray box with a width and height of 200px and set a shadow in the lower right corner. The shadow color is black and the opacity is 0.5, which is a semi-transparent effect.
5. Shadow Spread
In addition to setting the shadow’s blur radius, CSS also supports setting the shadow’s spread. Adjusting the spread parameter controls the shadow’s spread.
Example 7: Setting a Diffusion Shadow Effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Diffusion Shadow Effect</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 10px 10px 10px 10px #888888;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the above example, we create a gray box with a width and height of 200px and set a shadow in the lower right corner. The shadow’s horizontal position is 10px, the vertical position is 10px, the blur radius is 10px, and the spread is 10px.
6. Combining Shadow Effects
By combining different shadow parameters, you can create a variety of shadow effects, such as combining inner and outer shadows, or combining multiple shadows.
Example 8: Combining Inner and Outer Shadows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Combining Inner and Outer Shadows Example</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 10px 10px 10px #888888, inset 5px 5px 5px #888888;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example above, we create a gray box with a width and height of 200px and set an outer shadow and an inner shadow. The outer shadow is a shadow in the lower right direction, and the inner shadow is a shadow in the lower right direction.
Example 9: Multiple Shadow Combinations
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple Shadow Combinations Example</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 10px 10px 10px #888888, -10px -10px 10px #888888, inset 5px 5px 5px #888888, inset -5px -5px 5px #888888;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the above example, we created a gray box with a width and height of 200px and set four shadow effects: two outer shadows and two inner shadows.
7. Application of Shadow Effects
Shadow effects are widely used in web design to highlight elements, add three-dimensionality, and enhance visual effects. The following are some common shadow application scenarios:
- Button Shadow: Add a shadow effect to a button to make it appear more three-dimensional.
- Image Shadow: Add a shadow effect to https://coder-cafe.com/wp-content/uploads/2025/09/images to enhance their three-dimensionality.
- Card Shadow: Add a shadow effect to card elements to highlight the card’s border.
- Text Shadow: Add a shadow effect to text to improve readability.
By properly using shadow effects, you can make your web design more vivid and attractive.