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 dark:bg-surface-dark dark:text-white">
          <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 dark:bg-surface-dark">
          <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 dark:bg-surface-dark">
          <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 dark:bg-surface-dark">
          <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 dark:bg-surface-dark">
          <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 dark:bg-surface-dark">
          <code class="self-center">.shadow-5</code>
        </div>
      </div>

Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

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="flex flex-1 flex-wrap items-end justify-between space-y-2 px-3 py-8 dark:bg-surface-dark">
        <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 dark:bg-surface-dark"></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

Access restricted

To view this section you must have an active PRO account

Shadows

Tailwind CSS Shadows

Basic example

Strong shadows

Inner shadow

Shadow on hover

Images with shadow

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):