How to add a shadow to an element
In this guide you can find out how to add a shadow to any box on your page.
Adding box shadows
Shadows are a common design feature that can help elements stand out on your page. In CSS, shadows on the boxes of elements are created using the
box-shadow property (if you want to add a shadow to the text itself, you need
box-shadow property takes a number of values:
- The offset on the x-axis
- The offset on the y-axis
- A blur radius
- A spread radius
- A color
In the example below we have set the X and Y axes to 5px, the blur to 10px and the spread to 2px. I am using a semi-transparent black as my color. Play with the different values to see how they change the shadow.
Note: We are not using
inset in this example, this means that the shadow is the default drop shadow with the box on top of the shadow. Inset shadows appear inside the box as if the content were pushed back into the page.