Tailwind CSS React Shadows

Responsive shadows built with Tailwind CSS React. 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

        
            
      import React from 'react';

      export default function App() {
        return (
            <div className="flex flex-1 flex-wrap justify-between gap-2 dark:text-neutral-800">
                <div className="flex h-[100px] w-[100px] flex-col justify-center rounded-lg bg-white text-center shadow-none">
                  <code className="self-center">.shadow-none</code>
                  <small>removes shadows</small>
                </div>
                <div className="flex h-[100px] w-[100px] justify-center rounded-lg bg-white text-center shadow-sm shadow-black/10 dark:shadow-black/40">
                  <code className="self-center">.shadow-sm</code>
                </div>
                <div className="flex h-[100px] w-[100px] justify-center rounded-lg bg-white text-center shadow shadow-black/10 dark:shadow-black/40">
                  <code className="self-center">.shadow</code>
                </div>
                <div className="flex h-[100px] w-[100px] justify-center rounded-lg bg-white text-center shadow-md shadow-black/5 dark:shadow-black/30">
                  <code className="self-center">.shadow-md</code>
                </div>
                <div className="flex h-[100px] w-[100px] justify-center rounded-lg bg-white text-center shadow-lg shadow-black/5 dark:shadow-black/30">
                  <code className="self-center">.shadow-lg</code>
                </div>
                <div className="flex h-[100px] w-[100px] justify-center rounded-lg bg-white text-center shadow-xl shadow-black/5 dark:shadow-black/30">
                  <code className="self-center">.shadow-xl</code>
                </div>
              </div>   
        );
      }

Hey there 👋 we're excited about TW Elements for React 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

        
            
      import React from 'react';

      export default function App() {
        return (
          <div className="mb-12 flex flex-1 flex-wrap items-end justify-between space-y-2 px-3 py-10">
            <div className="flex h-[100px] w-[100px] justify-center rounded-lg bg-neutral-300 text-center shadow-none"></div>
            <div className="flex h-[100px] w-[100px] justify-center rounded-lg bg-neutral-300 text-center shadow-sm shadow-black/30 dark:shadow-black/50"></div>
            <div className="flex h-[100px] w-[100px] justify-center rounded-lg bg-neutral-300 text-center shadow shadow-black/30 dark:shadow-black/50"></div>
            <div className="flex h-[100px] w-[100px] justify-center rounded-lg bg-neutral-300 text-center shadow-md shadow-black/20 dark:shadow-black/40"></div>
            <div className="flex h-[100px] w-[100px] justify-center rounded-lg bg-neutral-300 text-center shadow-lg shadow-black/20 dark:shadow-black/40"></div>
            <div className="flex h-[100px] w-[100px] justify-center rounded-lg bg-neutral-300 text-center shadow-xl shadow-black/20 dark:shadow-black/40"></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.

        
            
      import React from 'react';

      export default function App() {
        return (
          <div className="flex h-[100px] w-[100px] justify-center rounded-lg bg-white text-center shadow-inner dark:shadow-black/40"></div>
        );
      }

Shadow on hover

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

        
            
      import React from 'react';

      export default function App() {
        return (
          <img
            src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
            className="h-auto max-w-sm rounded-lg shadow-none transition-shadow duration-300 ease-in-out hover:shadow-lg hover:shadow-black/5 dark:hover:shadow-black/30"
            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.

        
            
      import React from 'react';

      export default function App() {
        return (
            <div className="grid grid-cols-3 items-center gap-4">
                <div className="mb-4">
                  <img
                    src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
                    className="h-auto w-full rounded-lg shadow-md shadow-black/5 dark:shadow-black/30"
                    alt="Hollywood Sign on The Hill"
                  />
                </div>
                <div className="mb-4">
                  <img
                    src="https://tecdn.b-cdn.net/img/new/standard/city/031.webp"
                    className="h-auto w-full rounded-lg shadow-md shadow-black/5 dark:shadow-black/30"
                    alt="Five Lands National Park"
                  />
                </div>
                <div className="mb-4">
                  <img
                    src="https://tecdn.b-cdn.net/img/new/standard/city/043.webp"
                    className="h-auto w-full rounded-lg shadow-md shadow-black/5 dark:shadow-black/30"
                    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