Tailwind Realistic Shadows

How to use

In the remainder of this page I provide some tailwind custom utility classes that give your components realistic shadows.

To use them, you should make some changes to your tailwind css file.

1. Add two color variables to your tailwind css file.

     @import tailwindcss;
     ...
   + :root {
   + 	...
   + 	--realistic-light: #ffffff80; /* for light mode */
   + 	/* --realistic-light: #ffffff40; /* recommended for dark mode */ */
   + 	--realistic-shadow: #00000030; /* recommended for light mode */
   + 	/* --realistic-shadow: #ffffff80; /* recommended for dark mode */ */
   + }
   

2. Copy and paste the utility class into your tailwind css file

     @import tailwindcss;
     ...
     :root {
     	...
     }
     
   + @utility shadow-realistic-button {
     	...
     }
     
   + @utility shadow-realistic-button {
   + 	box-shadow:
   + 		inset 0px -2px 2px var(--realistic-shadow),
   + 		inset 0px 2px 2px var(--realistic-light),
   + 		0px 2px 5px var(--realistic-shadow),
   + 		-0px -1px 1px var(--realistic-shadow);
   + }
   

3. Use the utility class to your components.

<Button className="shadow-realistic-button">Click me</button>

4. Adjust the colors of the shadows to match the colors of your components. (optional)

Tips

• Though the shadow colors I provided above suits most components, it looks even better if you adjust the colors of the shadows to match the colors of your components.
• The background color should not be too dark or too light so that both lighter and darker shadows are visible.