Tailwind CSS Shadows

Responsive shadows built with Tailwind CSS. Download for free without registration.

Basic example

For light design and bright compositions use standard shadows. To apply a shadow to an element simply add one of the following classes to it.

.shadow-none removes shadows

.shadow-sm

.shadow

.shadow-md

.shadow-lg

.shadow-xl

HTML

        
            
      <div
        class="flex flex-1 flex-wrap justify-between gap-2 dark:text-neutral-800">
        <div
          class="flex h-[100px] w-[100px] flex-col justify-center rounded-lg bg-white text-center shadow-none">
          <code class="self-center">.shadow-none</code>
          <small>removes shadows</small>
        </div>
        <div
          class="flex h-[100px] w-[100px] justify-center rounded-lg bg-white text-center shadow-sm shadow-black/10 dark:shadow-white/20">
          <code class="self-center">.shadow-sm</code>
        </div>
        <div
          class="flex h-[100px] w-[100px] justify-center rounded-lg bg-white text-center shadow shadow-black/10 dark:shadow-white/20">
          <code class="self-center">.shadow</code>
        </div>
        <div
          class="flex h-[100px] w-[100px] justify-center rounded-lg bg-white text-center shadow-md shadow-black/5 dark:shadow-white/10">
          <code class="self-center">.shadow-md</code>
        </div>
        <div
          class="flex h-[100px] w-[100px] justify-center rounded-lg bg-white text-center shadow-lg shadow-black/5 dark:shadow-white/10">
          <code class="self-center">.shadow-lg</code>
        </div>
        <div
          class="flex h-[100px] w-[100px] justify-center rounded-lg bg-white text-center shadow-xl shadow-black/5 dark:shadow-white/10">
          <code class="self-center">.shadow-xl</code>
        </div>
      </div>

Hey there 👋 we want to make Tailwind Elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Share via Reddit Share via StumbleUpon

Strong shadows

HTML

        
            
      <div
        class="mb-12 flex flex-1 items-end justify-between space-y-2 py-10 px-3">
        <div
          class="flex h-[100px] w-[100px] justify-center rounded-lg bg-neutral-300 text-center shadow-none"></div>
        <div
          class="flex h-[100px] w-[100px] justify-center rounded-lg bg-neutral-300 text-center shadow-sm shadow-black/20 dark:shadow-white/30"></div>
        <div
          class="flex h-[100px] w-[100px] justify-center rounded-lg bg-neutral-300 text-center shadow shadow-black/20 dark:shadow-white/30"></div>
        <div
          class="flex h-[100px] w-[100px] justify-center rounded-lg bg-neutral-300 text-center shadow-md shadow-black/20 dark:shadow-white/30"></div>
        <div
          class="flex h-[100px] w-[100px] justify-center rounded-lg bg-neutral-300 text-center shadow-lg shadow-black/20 dark:shadow-white/30"></div>
        <div
          class="flex h-[100px] w-[100px] justify-center rounded-lg bg-neutral-300 text-center shadow-xl shadow-black/20 dark:shadow-white/30"></div>
      </div>

Inner shadow

Use the .shadow-inner utility to apply a subtle inset box shadow to an element. This can be useful for things like form controls or wells.

HTML

        
            
      <div class="flex flex-wrap justify-center">
        <div
          class="flex h-[100px] w-[100px] justify-center rounded-lg bg-white text-center shadow-inner dark:shadow-black/40"></div>
      </div>

Shadow on hover

Use .transition-shadow class to the element to apply a shadow hover effect.

HTML

        
            
      <div class="flex flex-wrap justify-center">
        <img
          src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
          class="h-auto max-w-sm rounded-lg shadow-none transition-shadow duration-300 ease-in-out hover:shadow-lg hover:shadow-black/10 dark:shadow-white/10"
          alt="" />
      </div>

Images with shadow

Theoretically, depending on the brightness of the image you should use standard or strong shadow. However, practical use shows that in most graphics strong shadows work better in most cases with images.

HTML

        
            
      <div class="grid grid-cols-3 items-center gap-4">
        <div class="mb-4">
          <img
            src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
            class="h-auto w-full rounded-lg shadow-md shadow-black/20 dark:shadow-white/20"
            alt="Hollywood Sign on The Hill" />
        </div>
        <div class="mb-4">
          <img
            src="https://tecdn.b-cdn.net/img/new/standard/city/031.webp"
            class="h-auto w-full rounded-lg shadow-md shadow-black/20 dark:shadow-white/20"
            alt="Five Lands National Park" />
        </div>
        <div class="mb-4">
          <img
            src="https://tecdn.b-cdn.net/img/new/standard/city/043.webp"
            class="h-auto w-full rounded-lg shadow-md shadow-black/20 dark:shadow-white/20"
            alt="Los Angeles Skyscrapers" />
        </div>
      </div>

If you are looking for more advanced options, try Bootstrap Images from MDBootstrap.

Shadows

Basic example

Strong shadows

Inner shadow

Shadow on hover

Images with shadow

Related resources