Styles

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.

image

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.
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-2xl 
 <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).

image description backdrop-blur-sm
image description backdrop-blur-md
image description backdrop-blur-lg
image description backdrop-blur-xl
image description 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>