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-1

.shadow-2

.shadow-3

.shadow-4

.shadow-5

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-1">
          <code class="self-center">.shadow-1</code>
        </div>
        <div
          class="flex h-[100px] w-[100px] justify-center rounded-lg bg-white text-center shadow-2">
          <code class="self-center">.shadow-2</code>
        </div>
        <div
          class="flex h-[100px] w-[100px] justify-center rounded-lg bg-white text-center shadow-3">
          <code class="self-center">.shadow-3</code>
        </div>
        <div
          class="flex h-[100px] w-[100px] justify-center rounded-lg bg-white text-center shadow-4">
          <code class="self-center">.shadow-4</code>
        </div>
        <div
          class="flex h-[100px] w-[100px] justify-center rounded-lg bg-white text-center shadow-5">
          <code class="self-center">.shadow-5</code>
        </div>
      </div>

Hey there 👋 we want to make TW 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

For dark design and dark elements use strong shadows by adding -strong to the shadow class. For example: .shadow-2-strong

HTML

        
            
      <div
        class="mb-12 flex flex-1 flex-wrap items-end justify-between space-y-2 px-3 py-10">
        <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-1-strong"></div>
        <div
          class="flex h-[100px] w-[100px] justify-center rounded-lg bg-neutral-300 text-center shadow-2-strong"></div>
        <div
          class="flex h-[100px] w-[100px] justify-center rounded-lg bg-neutral-300 text-center shadow-3-strong"></div>
        <div
          class="flex h-[100px] w-[100px] justify-center rounded-lg bg-neutral-300 text-center shadow-4-strong"></div>
        <div
          class="flex h-[100px] w-[100px] justify-center rounded-lg bg-neutral-300 text-center shadow-5-strong"></div>
      </div>

Inner shadow

Use the .shadow-twe-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 h-[100px] w-[100px] justify-center rounded-lg bg-white text-center shadow-twe-inner"></div>

Shadow on hover

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

HTML

        
            
      <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-4-strong"
        alt="" />

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-4-strong"
            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-4-strong"
            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-4-strong"
            alt="Los Angeles Skyscrapers" />
        </div>
      </div>

Shadows

Basic example

Strong shadows

Inner shadow

Shadow on hover

Images with shadow

Related resources

Tutorials:

Extended Docs:

Design System (Figma):