Introduction to CSS box-shadow
CSS box-shadow defines as a property that attaches shadows to a specified element. This adds deep designs in the website creation without in need of images and other container elements. This property brings a box away from the background by just drawing borders. These are just a powerful property in CSS which can be achieved to create 8 paper life shadow effects. Box-shadow property provides 2-D effects on a web page.
Syntax and Parameters:
box-shadow: none|h-offset v-offset | blur | spread |color |inset|initial|inherit;Here the two values are commonly followed by remaining values.
Example:
Here we have three parameters first two sets the location of the shadows in both axes.
#demo1
{
Box-shadow: 5px ,10px, red; // This says offset-x, y, color value.
}How box-shadow Property works in CSS?
The CSS box-shadow has six different values on this property.
1. inset
This value creates shadow inside the box using shadow property as it could not create the shadow outside. This is declared either in the beginning or end of the property. At some situation, this may be omitted.
Example:
box-shadow: inset 1px 1px 2px 2px green; //[inset][horizontal offset][vertical offset][blur radius][spread distance][color]
2. color
This sets the color to the shadow box.
3. horizontal offset
It provides a length of the shadow effect. Positive values are assigned to render the shadow to the right. Negative values shift the shadows to the left.
Example:
box-shadow : 30px 20px;
Here the horizontal offset is set to 30px which is higher than the v-axis and the vertical offset is 20px.
4. vertical offset
It renders the boxes shadow position on Y-axis. Here the positive value scales down and negative values will move up.
Example with negative values:
Box-shadow: 20 px -10 px; here negative value moves the shadow towards top.
5. blur
The sharpness of the shadow is visible clearly. And in some cases, it is optional as the default value is zero which specifies a color to be solid and the shadow is sharper.
Example:
Box-shadow: 4px 4px 10px;
6. spread distance
It allows the size of the shadow to shrink or grows in the box. Here the fourth value is for spread radius. This spreads the shadow which extends in all directions. The positive value makes the shadow to expand in all sizes. Negative value contract on all sides.
Example:
Box-shadow: 0 20px 20px -4px;
Among these six values, the importance is given on two values like horizontal and vertical OFFSET. Except for color and inset values, the CSS length is px, em and percentage and the color value uses hexadecimal values.
Examples of CSS box-shadow
Given below are the examples:
Example #1
Using inset Property value.
Here a border shadow is reflected inside with the color red.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
blockquote {
width: 60%;
margin: 45px auto;
padding: 22px;
font-size: 20px;
box-shadow: inset 12px 4px red;
}
</style>
</head>
<body>
<h1><center> Wisdom Quotes Using inset property</h1>
<blockquote>
<q>If you're trying to achieve, there will be roadblocks. I've had them; everybody has had them. But obstacles don't have to stop you. If you run into a wall, don't turn around and give up. Figure out how to climb it, go through it, or work around it.
Read more at https://www.brainyquote.com/topics/wisdom-quotes.</q>
<p>— Michael Jordan</p>
</blockquote>
</body>
</html>Output:
Example #2
Using color value.
Code:
<!DOCTYPE html>
<html>
<head>
<title> Box-Shadow using Offset</title>
<style>
.adc1 {
border: 1.5px solid;
padding: 10px;
box-shadow: 6px 9px 9px 9px orange;
}
.adc2 {
border: 1.5px solid;
padding: 10px;
box-shadow: 6px 9px 9px 20px yellow;
}
</style>
</head>
<body>
<div class = "adc1">
<h1>Welcome to Hot CSS Picks</h1>
</div><br><br>
<div class = "adc2">
An Online class Tutorial
</div>
</body>
</html>Output:
Example #3
Using Multiple Shadows on the box.
Using single box-shadow property we can add, multiple shadows on an element. So, any number of shades with different colors could be specified but should be separated by commas. In the below code box-shadow specifies three different colours. box-shadow:4px 4px red, 12px 12px green, 16px 16px yellow.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#multiple1 {
border: 1px solid;
padding: 10px;
box-shadow:4px 4px red, 12px 12px green, 16px 16px yellow;
}
#multiple2 {
border: 1px solid;
padding: 10px;
box-shadow:4px 4px 10px brown, 11px 11px 7px green, 16px 16px 7px blue;
}
</style>
</head>
<body>
<h1>box-shadow: 4px 4px red, 12px 12px green, 16px 16px yellow:</h1>
<div id="multiple1">
<p>Shows reflection of shadows in multiple.</p>
</div>
<br>
</br>
<h1>box-shadow: 4px 4px 10px brown, 11px 11px 7px green, 16px 16px 7px blue:</h1>
<div id="multiple2">
<p>Shows reflection of shadows with blur effect.</p>
</div>
</body>
</html>Output:
Example #4
Code:
<!DOCTYPE html>
<html>
<head>
<title> Box-Shadow Demo</title>
<style>
.shadbox {
box-shadow: 0 0 0 2px purple;
&:hover {
box-shadow: 0 0 0 4px purple;
}
}
</style>
</head>
<body>
<h1><center> Box Shadow Demo </center> </h1>
<div class="shadbox"> With hover case</div>
</body>
</html>Output:
When changing the y-offset to negative like.
Code:
<style>
.shadbox {
box-shadow: 0 -1px 0 2px purple;
&:hover {
box-shadow: 0 -1px 0 4px purple;
}
}
</style>So here we could see Border top is shaded due to negative value.
Output;
Example #5
Using initial value – default.
Code:
<!DOCTYPE html>
<html>
<head>
<title> Box-Shadow Demo</title>
<style>
.shadbox {
box-shadow: initial;
border : 4px solid;
&:hover {
box-shadow: initial;
border : 4px solid;
}
}
</style>
</head>
<body>
<h1><center> Box Shadow Demo- Initial</center> </h1>
<div class="shadbox"> With Initial value</div>
</body>
</html>Output:
Example #6
Displaying Blur Shadow.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
blockquote {
width: 50%;
margin: 30px auto;
padding: 21px;
font-size: 18px;
box-shadow: inset 12px 4px 24px 4px green, 4px 4px 10px 3px green;
}
</style>
</head>
<body>
<h1><center> Wisdom Quotes Using inset property showcasing blur value</h1>
<blockquote>
<q>If you're trying to achieve a goal, there will be roadblocked. I have had them; everybody has had them personally. But obstacles don't have to stop you. If you run into a barrier, don't turn around and give up the goal. Clear out how to climb it, go through it, or work around it.
Read more at https://www.brainyquote.com/topics/wisdom-quotes.</q>
<p>— Michael Jordan</p>
</blockquote>
</body>
</html>Output:
Conclusion
Therefore, with this Shadow-box property web page can create a 3D effects using those elements which are used in design software. Therefore, in this article, we have gone through their property values with a detailed demo on them. Completely this shadow gives some amazing effects.
Recommended Articles
This is a guide to CSS box-shadow. Here we discuss how box-shadow property works in CSS and examples respectively. You may also have a look at the following articles to learn more –
