If your goal is to make a visually pleasant website, then adding custom CSS shadows may be a great choice. It's a much better option than using images or backgrounds with shadow effects drawn in some graphical editor.
The CSS code is rendered by the browser and is faster to load over the network. But the graphical assets, on the other hand, need to be transferred from the server to client and can decrease performance of the site.
To add a custom shadow to a specific HTML element, you need to use the "box-shadow" CSS property. Please review the syntax below:
box-shadow: x-offset y-offset blur spread color
- x-offset - This sets horizontal distance between element and the shadow. Both positive and negative values are accepted.
- y-offset - Sets vertical distance between element and the shadow. Positive and negative values are accepted as well.
- blur - Blue radius for the shadow, this value has to be a positive number only or 0.
- spread - This is a spread radius, positive value will enlarge the shadow, but negative value will decrease shadow in size.
- color - Specifies color of the shadow for the target element.
You can also specify a single keyword value for the "box-shadow" CSS property, which will be a replacement for the shadow configuration options. Possible values are listed below:
- none - You can use this value to remove the shadow if it was previously defined for the specific element.
- inherit - This keyword instructs the browser to take the final value from the parent element.
- initial - You can use this value to apply default value to some element.
- revert - Resets the property to the value inherited from the parent element or to the value provided by the browser.
- unset - You can use this keyword to set the property to inherited value, or if it's not provided, then to initial value.
For example, to disable previously defined shadow, you will need to create a code like the following:
<style>
.no-shadow {
box-shadow: none;
}
</style>Now, you have a generic class name, which is "no-shadow", and you can apply it to any element that you want to have no shadow. The following HTML code block shows how to use it.
<div class="no-shadow"></div>Now, it's time to provide a live code that demonstrates how to add a "box-shadow" property for an element. We created a simple box with a shadow and positioned it in the center of the document. Please see the full code below:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Box shadow example</title>
<meta name="description" content="Example of how to add box shadow to a HTML element">
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.square {
width: 200px;
height: 200px;
background: #3366cc;
box-shadow: 0px 0px 20px 10px #4bf090;
}
</style>
</head>
<body>
<div class="container">
<div class="square"></div>
</div>
</body>
</html>Also, you can see a visual preview of the code that we just created.
Shadow inside of an element
It's also possible to place a shadow inside of the given element. For that purpose you should use the "inset" keyword, it must be prepended to the standard shadow options. Following is an example of how to use it correctly:
box-shadow: inset 0px 0px 20px 10px #4bf090;
The important note is that inner shadows are placed on top of the background and below the standard content of a HTML element.
Below is our modified example that shows how to make an inner shadow.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inner box shadow example</title>
<meta name="description" content="Example of how to add inner box shadow to a HTML element">
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.square {
width: 200px;
height: 200px;
background: #3366cc;
box-shadow: inset 0px 0px 20px 10px #4bf090;
}
</style>
</head>
<body>
<div class="container">
<div class="square"></div>
</div>
</body>
</html>Following is the preview of the given code:
Negative offset
As you probably have noticed in our article, both x-offset and y-offset options accept negative values. It means that the shadow can be shifted to any direction on a page. Following is simple example of such a method:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Box shadow with negative offset</title>
<meta name="description" content="Example of how to make box shadow with negative offset">
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.square {
width: 200px;
height: 200px;
background: #3366cc;
box-shadow: -15px -15px 20px 10px #4bf090;
}
</style>
</head>
<body>
<div class="container">
<div class="square"></div>
</div>
</body>
</html>The preview is provided below. As you can see, the shadow is at the top left side of the square, since we provided -15px value for both horizontal and vertical offsets.
One-side shadow only
It's also possible to add shadow to a single side only of the given element. To make it, you need to set some offset option to a zero value, then the other offset must be set to a positive number. Also, the spread value has to be a negative value, to shrink the shadow below the element.
In our example, we are adding a single shadow for the bottom side, as result x-offset is zero, y-offset is 30px, blur is 30px and the spread is -10px. Please see the full source code below:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>One side shadow only</title>
<meta name="description" content="Example of how to make a shadow for a single side only">
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.square {
width: 200px;
height: 200px;
background: #3366cc;
box-shadow: 0px 30px 20px -10px #4bf090;
}
</style>
</head>
<body>
<div class="container">
<div class="square"></div>
</div>
</body>
</html>Now, you can see how a single side shadow will look in the browser:
Multiple shadows
You may also add multiple shadows to an element by separating them with a comma symbol. Very good example that demonstrates such a functionality is provided below. There, we create a box with two shadows, one on the left side, and the other one on the right side.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multiple shadows for an element</title>
<meta name="description" content="Example of how to add multiple shadows to an element">
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.square {
width: 200px;
height: 200px;
background: #3366cc;
box-shadow: 30px 0px 20px -10px #4bf090, -30px 0px 20px -10px #4bf090;
}
</style>
</head>
<body>
<div class="container">
<div class="square"></div>
</div>
</body>
</html>Now, you can see how such effect is rendered:
Border radius and box shadow
If the border radius feature is enabled for specific elements in your CSS code, then the shadow will follow the shape of the rounded area. It means that the shadow will also have the rounded corners on each side, as it's specified by the "border-radius" property. Please see source code below.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Border radius and a shadow</title>
<meta name="description" content="Example of how to apply border radious for an element with a shadow">
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.square {
width: 200px;
height: 200px;
background: #3366cc;
border-radius: 20px;
box-shadow: 15px 15px 20px 10px #4bf090;
}
</style>
</head>
<body>
<div class="container">
<div class="square"></div>
</div>
</body>
</html>Please check how it looks in the preview window below. Now, the shadow has rounded corners.
Zero based offset and blur
As you have seen earlier in this guide, both the offset and blur options can be set to zero value. This allows the creation of various unusual effects. For example, you may create a thick border around an element, which is actually a regular CSS shadow. Source code is given below.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Zero based offset and blur</title>
<meta name="description" content="Example of how to use zero based offset and blur values for a shadow">
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.square {
width: 200px;
height: 200px;
background: #3366cc;
box-shadow: 0px 0px 0px 20px #4bf090;
}
</style>
</head>
<body>
<div class="container">
<div class="square"></div>
</div>
</body>
</html>If we run the above example in the browser, you can see that there is no blur effect. The shadow is straight and solid.
Transparent shadow
If the element that is placed below the shadow has a background with a non-solid color, then you can use a semi transparent color to mix shadow with the underlying area. The specification is as the following:
rgba(red, green, blue, opacity)
- red - Value of a red color in a decimal format, from 0 to 255.
- green - Value of a green color in a decimal format, from 0 to 255.
- blue - Value of a blue color in a decimal format, from 0 to 255.
- opacity - Value of an opacity of an element, floating point number, from 0 to 1.
To create a shadow with a color that is half transparent, you may use such rule: rgba(240, 75, 144, 0.5)
The full source code is provided below:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Transparent shadow for a box</title>
<meta name="description" content="Example of how to make transparent shadow for a box">
<style>
html {
background: rgb(34,193,195);
background: linear-gradient(90deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.square {
width: 200px;
height: 200px;
background: #3366cc;
box-shadow: 0px 0px 30px 20px rgba(240, 75, 144, 0.5);
}
</style>
</head>
<body>
<div class="container">
<div class="square"></div>
</div>
</body>
</html>Now, please review how such effect looks in action:
Conclusion
As you see, CSS is a very powerful programming language. The single "box-shadow" property allows the creation of many different types of shadows. You can easily adapt our samples and integrate them into your web application.
However, the above list of possible shadow styles is not final, you can generate many other visual effects by using inset keywords, mixing multiple shadows, or using transparent colors, etc.
Comments