A powerful CSS box-shadow attribute may give web designs depth and dimension. Although CSS box-shadow first appears to be a straightforward property, there are many ways to use it to produce intricate shadow effects that can improve a website’s aesthetic appeal and user experience. In this article, we will see & dip deep into CSS box-shadow and demonstrate how to make sophisticated shadow effects that can elevate your website designs.
Basics of CSS Box Shadow: The Box-shadow facilitates the production of a shadow-like effect to the frames of an element. The multiple effects can be applied to the element’s frame which is separated by a comma. There are 5 parameters that make up the box-shadow property, which is used to cast a shadow effect around an element.
Syntax:
box-shadow: [horizontal] [vertical] [blur radius] [spread radius] [color];
- horizontal offset: If the offset is positive, the shadow will be on the right side of the box and if it is negative, it will be on the left.
- vertical offset: A negative value indicates that the box shadow will be above the box, and a positive value indicates that the shadow will be below the box.
- blur radius: If set to 0, the shadow will be sharp if set to 1, the shadow will be softened and will spread further out. For example, a shadow with a 6px horizontal offset and a 6px blur radius will have a total shadow of 12px.
- spread radius: Positive numbers expand the shadow, whereas negative values shrink it. The default value is 0. (The shadow size will be the same as the blur).
- color: It accepts any color value, such as hex, named, rgba, or hsla. Box shadows are rendered in the foreground color if the color value is not specified (text color). Nevertheless, older WebKit browsers (before Chrome 20 and Safari 6) disregard the rule when color is missing.
Example 1: We use the following code to generate a simple box shadow effect. This will generate a box shadow 5 pixels to the right and 5 pixels below the element, with a 5-pixel blur and the color #008000.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>
The Basics of CSS Box Shadow
</title>
<style>
div {
color: black;
background: #eee;
border-radius: 6px;
box-shadow: 7px 7px 7px #008000;
}
div h1 {
padding: 20px 20px 20px 20px;
}
div h3 {
padding: 20px 20px 20px 20px;
}
</style>
</head>
<body>
<div>
<h1>Welcome To GeeksforGeeks!</h1>
</div>
<div>
<h3>A Computer Science portal for geeks. </h3>
</div>
</body>
</html>
|
Output:
The Basics of CSS Box Shadow
Creating Complex Shadow Effects: Here, we will understand how to use CSS box-shadow to create more complicated shadow effects.
- Several(Multiple) Shadows: Using several shadows is one technique to produce more intricate shadow effects. You may give depth and dimension to an element by layering or overlapping shadow effects made with several shadows.
Example 2: A red shadow with a blur of 10 pixels, a cyan shadow with a blur of 20 pixels, and a green with a blur of 25 pixels will be produced around the element as a result. The output is a multilayered shadow effect that gives that element more depth and dimension.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title> Several Shadows </title>
<style>
div {
border-radius: 6px;
box-shadow: 0px 0px 10px red,
0px 0px 20px cyan,
0px 0px 25px green;
}
div h1 {
padding: 20px 20px 20px 20px;
}
div h3 {
padding: 20px 20px 20px 20px;
}
</style>
</head>
<body>
<div>
<h1>Welcome To GeeksforGeeks!</h1>
</div>
<div>
<h3>
A Computer Science portal for geeks.
</h3>
</div>
</body>
</html>
|
Output:
Several(Multiple) Shadows
- Inset shadow: Using inset shadows is also another method for producing intricate shadow effects. A shadow that shows inside the element instead of outside thereof is known as an inset shadow.
Example 3: The color #008000 will be used to produce an inset shadow that is 15 pixels wide.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title> Inset Shadows </title>
<style>
div {
background: #eee;
box-shadow: inset 0 0 15px #008000;
}
div h1 {
padding: 20px 20px 20px 20px;
}
div h3 {
padding: 20px 20px 20px 20px;
}
</style>
</head>
<body>
<div>
<h1>Welcome To GeeksforGeeks!</h1>
</div>
<div>
<h3>
A Computer Science portal for geeks.
</h3>
</div>
</body>
</html>
|
Output:
Inset shadow
- Text Shadows: This can give text dimension and contrast, and can also be made with CSS box shadow. With a 5-pixel blur as well as the color #008000, it will produce a text shadow that is 2 pixels below the text and 5 pixels to the right of the text. The outcome is the text that has a light drop shadow, enabling it to stand out and become easier to read.
Example 4:
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title> Text Shadow </title>
<style>
h1 {
text-shadow: 5px 2px 5px #008000;
}
</style>
</head>
<body>
<h1> This is Heading </h1>
</body>
</html>
|
Output:
Text Shadows
Advanced CSS Box Shadow Techniques: You can use more effective methods in addition to these fundamental ones to produce detailed and complex shadow effects.
- Layered Inset Shadows: The use of layered inset shadows is one sophisticated way. With this method, you can combine various inset shadows to produce layered shadow effects. Using a light shadow at the top and a dark shadow at the bottom will produce a box that appears raised. The outcome is a box that appears to be more three-dimensional and to be rising off the page.
Example 5:
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Layered Inset Shadows</title>
<style>
div {
box-shadow: inset 0 0 15px #008000,
inset 0 5px 5px #0984e3,
inset 0 -5px 5px #00cec9;
}
div h1 {
padding: 20px 20px 20px 20px;
}
div h3 {
padding: 20px 20px 20px 20px;
}
</style>
</head>
<body>
<div>
<h1>Welcome To GeeksforGeeks!</h1>
</div>
<div>
<h3>
A Computer Science portal for geeks.
</h3>
</div>
</body>
</html>
|
Output:
Layered Inset Shadows
- Interactive Shadows: You can create reactive shadow effects that react to user inputs with CSS box shadow. You could make a button or box, for instance, that modifies its shadow whenever the user hovers over it. This will produce a box with a 10-pixel blurred shadow. When the user hovers over it, it changes to a 20-pixel blurred shadow. The transition will be gradual and last for 0.5 seconds. As a consequence, the box reacts to human input and adds a light animation effect.
Example 6:
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Interactive Shadow </title>
<style>
div h1 {
padding: 20px 20px 20px 20px;
}
div h3 {
padding: 20px 20px 20px 20px;
}
div {
border-radius: 10px;
box-shadow: 0 0 10px #00b894;
transition: box-shadow 0.5s ease-in-out;
}
div:hover {
box-shadow: 0 0 20px #d63031;
}
</style>
</head>
<body>
<div>
<h1>Welcome To GeeksforGeeks!</h1>
</div>
<div>
<h3>
A Computer Science portal for geeks.
</h3>
</div>
</body>
</html>
|
Output:
Conclusion: A powerful CSS box-shadow attribute may give web designs depth and dimension. Advanced techniques like multiple shadows, inset shadows, and interactive shadows allow you to build complex and complicated shadow effects that will improve your website’s aesthetic appeal and user experience. With these methods at your disposal, you can advance your web designs and produce spectacular shadow effects that will distinguish your website from the competition.