6.1 The box-shadow Property
The box-shadow property in CSS is used to add shadow effects to elements. This property allows for a variety of visual effects, enhancing the look of web pages. Let’s break down the syntax, values, and examples of using box-shadow.
box-shadow Syntax
The box-shadow property accepts one or more values, each setting the parameters of the shadow. The general syntax looks like this:
element {
box-shadow: offset-x offset-y blur-radius spread-radius color;
}
Values:
offset-x: horizontal offset of the shadow. Positive values shift the shadow to the right, negative — to the leftoffset-y: vertical offset of the shadow. Positive values shift the shadow down, negative — upblur-radius: blur radius of the shadow. The larger the value, the more blurred the shadow will be. Default value is 0 (sharp shadow)spread-radius: shadow spread radius. Positive values increase the shadow size, negative — decrease it. Default value is 0color: color of the shadow. All CSS color formats are supported
6.2 Usage Examples
Basic Shadow:
.shadow-basic {
width: 200px;
height: 200px;
background-color: #3498db;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-basic">Basic shadow</div>
</body>
Blurred Shadow:
.shadow-blur {
width: 200px;
height: 200px;
background-color: #2ecc71;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-blur">Blurred shadow</div>
</body>
Spread Shadow:
.shadow-spread {
width: 200px;
height: 200px;
background-color: #e74c3c;
box-shadow: 10px 10px 20px 10px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-spread">Spread shadow</div>
</body>
Inset Shadow:
.shadow-inset {
width: 200px;
height: 200px;
background-color: #f1c40f;
box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-inset">Inset shadow</div>
</body>
6.3 box-shadow Settings
Details on setting box-shadow:
Shadow Offset (offset-x and offset-y)
- Positive values: shadow shifts right (
offset-x) and down (offset-y) - Negative values: shadow shifts left (
offset-x) and up (offset-y)
Shadow Blur (blur-radius)
- Value 0: shadow is sharp
- Positive values: the larger the value, the more blurred the shadow
Shadow Spread (spread-radius)
- Positive values: enlarges the shadow
- Negative values: shrinks the shadow
Shadow Color (color)
The color can be set in different formats: name, hex code, RGB, RGBA, HSL, HSLA.
Inset Shadow (inset)
The keyword inset creates a shadow inside the element, which can be used for creating a recessed effect.
Multiple Shadows with Different Parameters:
.multiple-shadows {
width: 200px;
height: 200px;
background-color: #bdc3c7;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 15px rgba(0, 0, 0, 0.3);
margin: 20px;
}
<body>
<div class="multiple-shadows">Multiple shadows</div>
</body>
GO TO FULL VERSION