Lets talk about ways to add shadows to elements on your page with CSS.

Box Shadow

We add a box shadow to an element using the ‘box-shadow’ CSS property. It takes a number of values which are listed below

  • X-axis offset – Specifies the horizontal distance
  • Y-axis offset – Specifies the vertical distance
  • Blur radius – A higher number increases the blur, a lower number reduces the blur. Negative values are not allowed.
  • Spread radius – A positive number increases the size of the blur,a negative number reduces the size of the blur.
  • Color – Color of the shadow
  • The ‘inset’ keyword – Places the shadow inside the element instead of outside like a drop shadow
.box-shadow {
  height: 400px;
  width: 400px;
  box-shadow: 1px 1px 3px 5px purple; /* x-offset|y-offset|blur|spread|color */
  display: grid;
  place-content: center;
  margin: auto;
}

To specify no values, you use 

box-shadow: none;


Multiple shadows can be added by providing a comma separated list of shadows.

box-shadow: 1px 1px 3px 5px purple, 
            1px 1px 3px 5px gold inset; /* x-offset|y-offset|blur-radius|spread|color|inset */

Text Shadow

You can add shadow to texts too. This can be done easily by using the ‘text-shadow’ CSS property

Values allowed by the text-shadow property are listed below

  • X-axis offset – Specifies the horizontal distance
  • Y-axis offset – Specifies the vertical distance
  • Blur radius – A higher number increases the blur, a lower number reduces the blur. Negative values are not allowed.
  • Color – Color of the shadow
.text-shadow {
  font-size: 1.25rem;
  text-shadow: 1px 1px 3px purple; /* x-offset|y-offset|blur-radius|color */
}

Drop Shadow

This is another way to add shadows around objects on your page with CSS. With this CSS function you can add drop shadows to images and irregular shapes on your page. We simply use this function with the filter CSS property.

.drop-shadow {
  filter: drop-shadow(1px 1px 4px green); /* x-offset|y-offset|blur-radius|color */
  font-size: 1.25rem;
}

The function accepts 4 arguments – x-offset | y-offset | blur-radius | color

The box shadow creates a rectangular shadow behind the elements box, while the drop-shadow function creates a shadow that fits the shape of the element.

Now you can go ahead adding shadows to any element or text of your choice on your page. I hope this helped.

Categorized in:

CSSWeb Dev

Tagged in:

,