Shadows

A soft shadow makes a card look as if it were floating a little above the page. In CSS, a shadow is made with the box-shadow property, which the CSS course didn't cover. Its value describes the shadow:

box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);

• 0: how far the shadow moves to the right (a negative value moves it to the left);
• 10px: how far it moves down (negative: up). A shadow below an element looks as if the light came from above;
• 15px: the blur: the larger the value, the softer the edge of the shadow;
• -3px: the spread: a positive value makes the shadow larger than the element, a negative one smaller;
• rgb(0 0 0 / 0.1): the color, here black with an alpha of 0.1, so 90% transparent. It's the newer notation with a slash that you saw in the CSS course.

You can write several shadows separated by commas, and most of Tailwind's shadows use two at once to look more natural. You don't have to remember the values: you just choose a size. This is what they look like:

So, for example, shadow-lg means this (Tailwind writes it with variables, so that it can be combined with other classes, but the result is the same):

.shadow-lg {
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

As with rounded corners, the names changed in Tailwind 4: in older examples, shadow-sm is today's shadow-xs, and shadow is today's shadow-sm. shadow-none removes a shadow.

A shadow is black by default, but you can give it a color from the palette: shadow-lg shadow-orange-200 makes a light orange glow. On a light page, choose gentle shadows: big, dark ones look heavy. Our card already has a light border, and together with a shadow, it stands out from the page nicely.