In this tutorial, we will create simple to complex Colourful shadows of components in pure CSS, Bootstrap, and Tailwind CSS.
Table of Contents
Simple Shadows in CSS
The CSS box-shadow property is used to apply one or more shadows to an element.
Here are some examples:
box-shadow property syntax
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
| Value | Description |
| none | Default value. No shadow is displayed |
| h-offset | Required. The horizontal offset of the shadow |
| v-offset | Required. The vertical offset of the shadow |
| blur | The higher the number, the more blurred the shadow will be. It is optional. |
| spread | A positive value increases the size of the shadow. A negative value decreases the size of the shadow. |
| color | The color of the shadow. The default value is the text color. |
| inset | Changes the shadow from an outer shadow to an inner shadow. The default value is outset. |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
Some CSS box-shadow examples
#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 name | value |
| shadow-none | box-shadow: none!important; |
| shadow-sm | box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important; |
| shadow | box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; |
| shadow-lg | box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important; |
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:
| Class | Properties |
|---|---|
| shadow-sm | box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); |
| shadow | box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); |
| shadow-md | box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); |
| shadow-lg | box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); |
| shadow-xl | box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); |
| shadow-2xl | box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); |
| shadow-inner | box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); |
| shadow-none | box-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>
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!
<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.
