In this lesson we will take some time to learn the theory behind the shadows.

As in Material Design, shadows play a big role in Material Minimal (TW Elements design system). However, they are definitely more subtle here - they have brighter colors and are often more extensive.

Unlike Material Design, Material Minimal is not afraid to use colored shadows, which can be seen in the example of our buttons. However, these are always delicate accents, as Material Minimal values subtlety and avoids exaggeration.

The shadows are undoubtedly one of the most distinctive features of Material Minimal and give it a special flavor.

Default shadows in Tailwind CSS

Tailwind CSS provides utilities for adding box-shadows to elements. They create the illusion of depth and are useful for adding subtle visual distinction between different elements on the screen.

The syntax for applying shadows in Tailwind CSS is very straightforward. You simply apply the shadow utility at its various strengths to an HTML element.

Note: .shadow-none removes shadows.


Add shadows to the carousel images

Just like the class for rounded corners, we also need to add a class for shadows to the Carousel items part.

So let's add .shadow-2xl class:

After saving the file and refreshing the browser you should see the shadow added to the carousel.


However, because the graphics in the carousel are quite dark, the shadow is hardly visible. We can increase its intensity by adding the .shadow-black/50 class.

How exactly does it work? It's simple:

  • shadow-black: This part of the class is setting the shadow color to black
  • /50: This part of the class is setting the opacity of the shadow to 50%.

This combination allows you to have a very diffused (because of .shadow-2xl) black shadow with 50% opacity. This would give a soft, semi-transparent black shadow.

So let's add this to the carousel:

Now the shadow is much more visible.


John Doe

About author

Michal Szymanski

Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.