Use Box Shadows to Bring Your Html Elements To Life

Sanjar Kairosh
November 15th, 20203 min read
Photo by Mildlee on Unsplash

A mixture of box-shadows with the CSS transition property to breath some life into your elements on a web page.

box-shadows-medium.jpg

Photo by Mildlee on Unsplash

Box-Shadow

This property in CSS would look something like:

box-shadow: 1px 2px 3px 3px rgba(0,0,0,0.14);
/* What each inner property does */
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  • Horizontal Offset (required): It sets a shadow on either the right or left side of an element. If you set the property to a positive 1px there will be a shadow of 1px on the right side of the box, if you set it as 1px there will be a shadow of 1px on the left side of the box. If 0 no horizontal shadow exists.
  • Vertical Offset (required): This sets a shadow above or below the element. If positive 1px the shadow is below the element. If negative 1px the shadow is above the element. If 0 understandably no vertical shadow exists.
  • Blur Radius (required): If 0 then the shadow will be sharp, and the higher this number the more blurry the shadow becomes. I personally like to set it at above 0 to give the shadow a realistic feel.
  • Spread Radius (Optional): The size of the shadow. The larger this value is the larger the size of the shadow will be around the element.
  • Color (Required): This is the color of the shadow. I usually set it to rgba(0,0,0,0.14) which is the color black with opacity 0.14. This gives the color a resemblance of a real-life shadow from my experience.

Minimal Box-Shadow And Hover Effect

Now that we went over the inner properties of the box-shadow property we can begin with a simple example of a minimal shadow with only a small positive vertical shadow, some shadow blur, and some small spread of shadow around the element.

box-shadow: 0 2px 2px 2px rgba(0,0,0,0.14);
transition: all 300ms ease;

I set a transition property on the element such that when hovered, the element transitions from its initial box-shadow to another box-shadow in an animated way.

The hover box-shadow was:

.card1:hover {
    box-shadow: 0 2px 4px 3px rgba(0,0,0,0.14);
}

You can find the element in this Codepen link. It is the first element:

https://codepen.io/san_coder13/pen/XWKoGvq

The first element has its shadow blurred more on hover, as well as having the radius of the shadow around the element spread more.

Shadow Introduction On Hover

Initially the element can be indistinguishable from its background or other elements. The introduction of a box-shadow upon hover can then bring it to life.

.card2:hover {
  box-shadow: 0 4px 3px 1px rgba(0,0,0,0.14);
}

This is the second element in the Codepen example above.

Shadow On One Side

By writing positive horizontal and vertical offsets, with some blur, the element can appear to have a shadow on one side only, as if the sun is shining on it above from the other side.

.card3 {
  box-shadow: 8px 2px 5px 0px rgba(0,0,0,0.14);
}

In this instance we won’t have any hover effect. And we can’t use the spread radius option since we only want the shadow on one side.


With these three basic examples I hoped to show box-shadow in action.

Blogs

copyright ©2021 all rights reserved, Sanjar Kairosh
illusrations by icons8