Drop shadow on irregular shapes in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a drop shadow in web design?

A drop shadow is a visual effect that adds a shadow behind an element to create depth and make it stand out from the background.

beginner

How do you apply a basic drop shadow using Tailwind CSS?

Use the shadow utility class, for example: <div class="shadow">Content</div> adds a default drop shadow.

intermediate

Why are drop shadows tricky on irregular shapes?

Because drop shadows follow the shape's bounding box by default, not the actual shape edges, so shadows may appear as rectangles or squares around irregular shapes.

intermediate

How can you create a drop shadow that follows an irregular shape in Tailwind CSS?

Use filter drop-shadow utilities combined with transparent backgrounds or SVG shapes. The drop-shadow filter applies shadow based on the visible shape edges, not the bounding box.

intermediate

What role does the filter drop-shadow utility play compared to the shadow utility in Tailwind?

shadow adds a shadow to the element's box, while filter drop-shadow applies a shadow to the visible pixels of the element, which is better for irregular shapes.

Which Tailwind class adds a basic drop shadow to an element's bounding box?

A shadow

B drop-shadow

C filter

D shadow-box

The shadow class adds a shadow to the element's bounding box.

Which Tailwind utility applies a shadow based on the visible shape edges, ideal for irregular shapes?

A shadow-inner

B shadow

C shadow-lg

D drop-shadow

The drop-shadow filter applies shadow based on the visible pixels, perfect for irregular shapes.

Why might a drop shadow look like a rectangle around an irregular shape when using the shadow class?

A Because the element has no background

B Because the shadow color is wrong

C Because the shadow follows the element's bounding box, not the shape edges

D Because the shadow is disabled by default

The shadow class shadows the bounding box, which is rectangular even if the shape is irregular.

Which CSS property does Tailwind's drop-shadow utility use under the hood?

A filter: drop-shadow()

B background-shadow

C text-shadow

D box-shadow

Tailwind's drop-shadow uses the CSS filter: drop-shadow() property.

To create a drop shadow on an SVG irregular shape using Tailwind, which utility is best?

A shadow

B drop-shadow

C shadow-md

D shadow-none

The drop-shadow filter works well with SVG shapes to follow their edges.

Explain how drop shadows behave differently on regular rectangular shapes versus irregular shapes in Tailwind CSS.

Think about how the shadow follows the shape's outline.

Describe how you would add a drop shadow to an irregular shape using Tailwind CSS and why you would choose that method.

Consider the difference between box-shadow and filter drop-shadow.