Shadows in CSS

Colourful shadows of components | CSS, Bootstrap, & Tailwind?

In this tutorial, we will create simple to complex Colourful shadows of components in pure CSS, Bootstrap, and Tailwind CSS.

Simple Shadows in CSS

The CSS box-shadow property is used to apply one or more shadows to an element.

Here are some examples:

Red Shadow MD
Blue Shadow MD
Green Shadow MD

box-shadow property syntax


box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
ValueDescription
noneDefault value. No shadow is displayed
h-offsetRequired. The horizontal offset of the shadow
v-offsetRequired. The vertical offset of the shadow
blur The higher the number, the more blurred the shadow will be.
It is optional.
spreadA positive value increases the size of the shadow.
A negative value decreases the size of the shadow.
colorThe color of the shadow. The default value is the text color.
insetChanges the shadow from an outer shadow to an inner shadow.
The default value is outset.
initialSets this property to its default value.
inheritInherits this property from its parent element.

Some CSS box-shadow examples

box-shadow: #959da533 0px 8px 24px; padding:10px;
box-shadow: #00000026 1.95px 1.95px 2.6px;
box-shadow: #64646f33 0px 7px 29px 0px;
box-shadow: #00000059 0px 5px 15px;
box-shadow: #00000029 0px 1px 4px;
box-shadow: #0000003d 0px 3px 8px;
box-shadow: #32325d40 0px 30px 60px -12px inset,
#0000004d 0px 18px 36px -18px inset;

Bootstrap shadows

Bootstrap is a CSS framework. It provides some classes for shadows which include small, medium, and large size shadows. The shadow classes in Bootstrap are shadow-none, shadow-sm, shadow and shadow-lg.


<div class="shadow-none p-3 mb-5 bg-light">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-body">Small shadow</div>
<div class="shadow p-3 mb-5 bg-body">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body">Larger shadow</div>

In bootstrap these class use the following values of CSS for creating shadows.

Class namevalue
shadow-nonebox-shadow: none!important;
shadow-smbox-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important;
shadowbox-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
shadow-lgbox-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
shadow-none
shadow-sm
shadow
shadow-lg

Colourful shadows in Tailwind CSS

Tailwind provides many utility classes for creating shadows of components. You can create any kind of shadow in any color.

Some of the shadow classes in tailwind are:

ClassProperties
shadow-smbox-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
shadowbox-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
shadow-mdbox-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
shadow-lgbox-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
shadow-xlbox-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
shadow-2xlbox-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
shadow-innerbox-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
shadow-nonebox-shadow: 0 0 #0000;

Apart from the size of the shadow, the tailwind also provides shadow colors, for example:


<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50">Button</button>

<button class="bg-blue-500 shadow-lg shadow-blue-500/50">Button</button>

Tailwind css shadow

Here is the complete list of tailwind utility classes for shadow.

Advance effect: Colorful and Smart Shadows of images

How to make a shadow effect that takes on some of the colors of the foreground element? To learn how read or watch the video below!

drop shadows for images

<div class="parent">
  <div class="colorfulShadow sushi"></div>
</div>

.colorfulShadow {
  position: relative;
}

.colorfulShadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  background-position: center center;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
  z-index: -1;
}

The CSS provides full flexibility to create different shadow effects. You can use the frameworks like bootstrap or tailwind etc.

We recommend the tailwind CSS classes which provide many classes for Colorful shadows of components.