Different Ways To Style CSS Box Shadow Effects

What is CSS box-shadow property?

The CSS box-shadow property allows you to add a shadow to an element. You can add multiple shadow effects to an element by separating them with commas.

Here’s another example of how it looks:

Now that you know what a CSS box shadow looks like on an element, let’s move to the next part to understand how you can apply that.

Values of the CSS box-shadow property

The CSS box shadow of an element is defined by X and Y offsets relative to the element, blur radius, spread radius, and color. Too complicated to understand? Don’t worry! Let’s understand this very simply.

• x-offset: The x-offset represents the horizontal shadow of the element. This value is required and can either be positive or negative. A positive value puts the shadow on the right side of the element, while a negative value puts the shadow on the left side.
• y-offset: The y-offset represents the vertical shadow of the element. The y-offset value is also required. It can be defined using a positive or negative value. A positive value puts the shadow below the element, while a negative value puts the shadow above the element.
• blur-radius: The blur-radius sets the blur. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If the value is not specified, it will be 0, making the shadow’s edge sharp.
• spread-radius: The spread-radius specifies the spread of the shadow. This value is optional and can either be positive or negative. A positive value will cause the shadow to grow bigger, and a negative value will cause the shadow to shrink. If the value is not specified, it will be 0, i.e., the size of the shadow will be the same as that of the element.
• color: The color sets the color of the shadow. The values can be the same as color values in CSS. Look at CSS Color Values for a list of possible values. If the value is not specified, it will be the same as the text color.

There’s another optional value, i.e., inset. We specify it as the first value of the CSS box-shadow property. This value is not specified by default, so the shadow is considered a drop shadow. Specifying this value moves the shadow inside the element’s frame, resulting in an inner shadow.

Now that we understand the values required to make a CSS box shadow of an element, let’s concrete this knowledge with a few quick examples.

Note: Test your websites on real desktop & mobile browsers. Try TestMu AI Now!

Examples of the CSS box-shadow property

CSS box shadow effects can be created in many different ways. You can create a typical CSS box shadow using just three values or create a smoother shadow effect by combining multiple shadows separated by a comma.

A bottom-right box shadow using XY offset, blur radius, and color:

CSS:

div{        
    /* offset-x | offset-y | blur-radius | color */
    box-shadow:  8px 6px 10px rgba(0, 0, 0, 0.3);
}

Output:

In this example, we set offset-x to 8px and offset-y to 6px, resulting in a shadow on the right and bottom sides of the box. The third value sets the blur radius to 10px, and the fourth value specifies the color of the shadow. You can also use spread radius, but we are not using it in this example.

An inner box shadow using inset, XY offset, blur, spread, and color:

CSS:

div{        
 /*inset | offset-x | offset-y | blur-radius | spread-radius | color */
   box-shadow:  inset 0px 10px 20px 2px #3a86ff;
 
}

Output:

Here we set inset as the first value that makes the shadow inner. Then we set the vertical offset to 10px, blur radius to 20px, and spread to 2px, resulting in an inner shadow from the top direction. Finally, the last value sets the color.

A smooth box shadow combining multiple shadows separated by a comma:

CSS:

div{        
  /* offset-x | offset-y | blur-radius | color, offset-x | offset-y | blur-radius | color, */
 box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
}

Output:

In this example, we create a smooth shadow effect by adding two shadows separated by a comma. We specify x and y-offsets to be consistent in both the shadows and the blur radius to be sharper by defining a value of 6px.

Different ways to style CSS box-shadow effects

You can style CSS box-shadow effects in various ways. We will look into three different ways of styling it.

Layered Shadows

This shadow will be the one you notice more frequently than others. This is created by combining multiple shadows separated by a comma and increasing the offset and blur for every shadow. Using this method, you can produce eye-catching shadows that seamlessly integrate into the page.

Let’s look at an example of how a layered shadow is created:

HTML:

<div class="box-one">This is a box with a default box shadow.</div>
<div class="box-two">This is a box with a layered box shadow.</div>

CSS:

.box-one{
    box-shadow:0 5px 5px rgba(0,0,0,0.2);
  }
 
.box-two{
   box-shadow: 0px 1px 2px rgba(0,0,0,0.2),
               0px 2px 4px rgba(0,0,0,0.2),
               0px 4px 8px rgba(0,0,0,0.2),
               0px 8px 16px rgba(0,0,0,0.2)
  }

Output:

In this example, we have two boxes. Notice how the layered shadow on the right box differs from the default shadow on the left. Layered shadow creates a smooth, subtle effect that the default shadow does not.

This layering method allows you to have more control over how shadows are rendered on the page and adjust the shadows’ spread, distance, and sharpness.

Neon Shadows

Up until now, we have only seen gray or black shadows. However, shadows can also have colors. Neon shadows are just those shadows that have a glowing effect on them. This type of shadow is best suited for a dark-themed website. Since dark-themed websites are gaining popularity, the usage of neon shadows is also increasing.

You can create a neon shadow by changing the color value of the CSS box-shadow property.

Let’s look at an example of a neon shadow.

HTML:

<div>This is a box with neon shadow</div>

CSS:

div{
    box-shadow: 0px 2px 14px 2px #64ffda;
}

Output:

In this example, we set the color value to a bluish shade and the y offset to 2px, blur radius to 14px, and spread radius to 2px. As a result, the card has a glowing neon effect.

You can apply multi-layer shadows for a more vibrant and smooth neon effect, much like we did in the previous example.

Neumorphic Shadows

The concept of neumorphic shadows comes from neumorphism, an adaptation of skeuomorphic design combined with flat design. It is a visual effect that attempts to replicate user interface elements exactly as they would appear in real life.

Neumorphic UI elements appear to be placed inside the background or directly on the background, in contrast to other web design trends that make items appear above the background. They are also called soft UI because soft shadows create the effect.

To better understand the nuemorphic UI, let’s compare it to a material design card component.

Notice how the material design card on the left looks like it floats above the background, while the neumorphic card on the right appears inside the background.

Now let’s see an example of how CSS implements it.

HTML:

<div>This is a card with neumorphic shadow on the top-left.</div>

CSS:

div{
   box-shadow: -6px -6px 10px rgba(255,255,255,0.45), 6px 6px 10px rgba(94,104,121,0.3);
 
}

Output:

We created two shadows separated by a comma. The most important thing to note is that using two shadows – a light shadow and a dark shadow is the fundamental component of creating neumorphic elements, as we did in this example. One serves as a highlight, and the other serves as the direction of the light source to create the neomorphic effect.

In the previous section of this blog on CSS box-shadow effects, we looked at how to use the inset keyword to make an inner shadow. Unlike drop shadows that make an element appear raised from beneath the background, an inset shadow gives the impression that the element is being pressed into it.

Let’s look at an example by just toggling the inset option to see the difference.

HTML:

<div class=first-card>This is a card with a drop shadow.</div>
<div class=second-card>This is a card with an inset shadow.</div>

CSS:

.first-card{
    box-shadow: -6px -6px 10px rgba(255,255,255,0.45), 6px 6px 10px rgba(94,104,121,0.3);
    }
 
.second-card{
      box-shadow: inset 6px 6px 10px rgba(255,255,255,0.45), inset -6px -6px 10px rgba(94,104,121,0.3);
  }

Output:

Important points to note for neomorphic shadows:

• The background color of the neomorphic elements must be the same (or very close) as the parent element’s background color.
• Elements need to have two types of shadows: one light and one dark.
• Rounded edges are a distinguishing feature of neomorphic elements.