Tailwind CSS Shadows & blurs
Using utility classes in Tailwind CSS, elements of the box shadow and backdrop blur effects can be achieved. Following examples illustrate the details.
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
Box Shadows:
The built-in shadow utility classes in Tailwind CSS make it easy to create box shadows to elements. Your design can benefit from the depth and dimension that shadows can offer, making it more appealing visually.
- Use the shadow-size class to add a shadow to an element. The desired
shadow size, such as
sm, md, lg, xl, or 2xl, should be used for'size' -
The shadow-color class allows you to apply particular shadow colors. Instead
of
"color"substitute a Tailwind CSS color name like"gray," "red," "blue,"etc. For instance, applying a medium-sized red shadow with the command shadow-md shadow-red-500.
<div class="flex items-center gap-8">
<div class="w-24 h-24 bg-white shadow-sm rounded-lg"></div>
<div class="w-24 h-24 bg-white shadow-md rounded-lg"></div>
<div class="w-24 h-24 bg-white shadow-lg rounded-lg"></div>
<div class="w-24 h-24 bg-white shadow-xl rounded-lg"></div>
<div class="w-24 h-24 bg-white shadow-2xl rounded-lg"></div>
</div>Backdrop Blur:
By using backdrop-blur-{amount} class, blur effect can be
added to
any
element. You can keep changing {amount} as per your requirement
such as none, sm (small), md (medium), lg (large), xl (extra large) and
2xl (double xl).
backdrop-blur-sm
backdrop-blur-md
backdrop-blur-lg
backdrop-blur-xl
backdrop-blur-2xl
<div class='flex items-center justify-center gap-8'>
<div class="relative">
<div class="absolute inset-6 backdrop-blur-sm h-20 w-20 bg-white/30"></div>
<img src="https://pagedone.io/asset/uploads/1688110228.png" alt="image description" class="w-32 h-32 object-cover rounded-lg shadow-xl" />
</div>
<div class="relative">
<div class="absolute inset-6 backdrop-blur-md h-20 w-20 bg-white/30"></div>
<img src="https://pagedone.io/asset/uploads/1688110228.png" alt="image description" class="w-32 h-32 object-cover rounded-lg shadow-xl" />
</div>
<div class="relative">
<div class="absolute inset-6 backdrop-blur-lg h-20 w-20 bg-white/30"></div>
<img src="https://pagedone.io/asset/uploads/1688110228.png" alt="image description" class="w-32 h-32 object-cover rounded-lg shadow-xl" />
</div>
<div class="relative">
<div class="absolute inset-6 backdrop-blur-xl h-20 w-20 bg-white/30"></div>
<img src="https://pagedone.io/asset/uploads/1688110228.png" alt="image description" class="w-32 h-32 object-cover rounded-lg shadow-xl" />
</div>
<div class="relative">
<div class="absolute inset-6 backdrop-blur-2xl h-20 w-20 bg-white/30"></div>
<img src="https://pagedone.io/asset/uploads/1688110228.png" alt="image description" class="w-32 h-32 object-cover rounded-lg shadow-xl" />
</div>
</div>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More