TW Elements - Shadows. Free UI/UX design course

Shadows

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.

HTML:

<div class="... shadow-none"></div>
<div class="... shadow-sm"></div>
<div class="... shadow"></div>
<div class="... shadow-md"></div>
<div class="... shadow-lg"></div>
<div class="... shadow-xl"></div>
<div class="... shadow-2xl"></div>

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:

HTML

<!--Carousel items-->
<div
  class="relative w-full overflow-hidden rounded-2xl shadow-2xl after:clear-both after:block after:content-['']">
  [...]
</div>

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:

HTML:

<!--Carousel items-->
<div
  class="relative w-full overflow-hidden rounded-2xl shadow-2xl shadow-black/50 after:clear-both after:block after:content-['']">
  [...]
</div>

Now the shadow is much more visible.

DEMO AND SOURCE CODE FOR THIS LESSON