Box Shadow
18 MAY 2020
Last updated
18 MAY 2020
Last updated
We can add a drop shadow to any HTML element using the CSS property box-shadow. Here's how.
Let's first set up some basic HTML elements to add our drop shadows to:
Then add some basic CSS:
The result is just three black boxes that will be easy for us to add drop shadows to by calling their unique id's:HTML elements setup
To add a basic drop shadow, let's use the box-shadow property on the Box 1:
We have 3 parameters here. The first 2 are, respectively, the x-offset and y-offset. They set the location of the drop shadow.
The offset is relative to the origin, which in HTML is always the top left corner of an element. A positive x-offset will move the shadow to the right, and a positive y-offset will move the shadow downwards.
The third parameter is the color of your drop shadow.
Keep in mind that although we used <div> elements here, the box-shadow property can be applied to any other HTML element as well.
If we want the shadow to look a little more realistic, we will want to experiment with the blur-radius parameter.
This parameter controls how much to blur the shadow such that it becomes bigger and lighter. Let's apply it to Box 2:
The value of 4px sets the radius of the blur to apply to our drop shadow.
If we want to control the size of the shadow, we can use the spread-radius parameter which controls how much a shadow grows or shrinks.
Let's add a spread radius of 8px to Box 2:
Adding a spread radius in addition to a blur to Box 2
Remember the order of these parameters!
If we want to get fancy, we can add multiple drop shadows to an element using a single box-shadow property.
Let's do that with Box 3 by simultaneously adding a blue and green drop shadow:
Adding multiple drop shadows to Box 3
While it will not create a drop shadow, the inset parameter can also be used with the box-shadow property.
As the name suggests, this parameter creates an inset shadow (i.e. shadow inside a box).
The inset parameter can be placed either at the beginning or the end of the
box-shadow property. Here we demonstrate its use with a blockquote element.
HTML:
CSS:
Of course you can add some blur and spread to enhance the shadow, or even multiple shadows:
With the box-shadow property, we can easily make elements on a web page stand out to create a nice 3D lighting effect.
If you want to do some experimenting yourself, here's a code pen I created with the examples used in this tutorial.
Play around and see what you can come up with!
Subscribe to my weekly newsletter
Visit my blog at 1000 Mile World
Follow me on Twitter
Reference : https://www.freecodecamp.org/news/css-tutorial-drop-shadow/
