CSS Box Shadow Property
Using CSS we can make a shadow of a box.
This is controlled by the box-shadow property.
A box-shadow has a color, and its dimensions can be specified with up to six values, which are given down below -
In other words, they can also be said as property value
- offset-x - the horizontal distance.
- offset-y - the vertical distance.
- blur-radius - 0 by default. value cannot be negative. the bigger the value, the bigger and lighter the shadow becomes.
- spread-radius - Zero by default. positive values will cause the shadow to expand. negative values will cause the shadow to shrink.
- inset - by default, the shadow is treated as a drop shadow. the inset keyword draws the shadow inside the frame/border.
- Color - Color can be of various notations: a color keyword, hexadecimal, rgb(), rgba(), hsl(), hsla().
Now we will see the syntax -
Syntax -
|
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
|
Now we will see various kinds of example -
Example 1 - A simple box shadow -
Output -
We can also add a blur radius to blur the shadow, as demonstrated in the Example below -
Example 2 - Adding a blur radius -
Output -
Example 3 - Adding a spread radius without a blur radius
Output -
Finally, we can apply the blur radius again to see the full result -
Example - Shadow with a blur and spread radius
Output -
Example - Setting the X and Y offsets to zero
Output -
Example - multiple shadows
Output -
