Bird
Raised Fist0
Tailwindmarkup~30 mins

Drop shadow on irregular shapes in Tailwind - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Drop Shadow on Irregular Shapes with Tailwind CSS
📖 Scenario: You are creating a simple webpage that shows a colorful irregular shape with a drop shadow. This effect helps the shape stand out from the background, making it look like it is floating.
🎯 Goal: Build a webpage with a div that has an irregular shape using CSS clip-path and a drop shadow using Tailwind CSS utilities.
📋 What You'll Learn
Use a div with a background color
Apply an irregular shape using clip-path
Add a drop shadow using Tailwind CSS classes
Make sure the page uses semantic HTML and is responsive
💡 Why This Matters
🌍 Real World
Designers and developers often use irregular shapes with shadows to create modern, eye-catching web designs that break the monotony of rectangles.
💼 Career
Knowing how to combine CSS clip-path with utility-first frameworks like Tailwind CSS is useful for front-end developers and UI designers to build creative layouts and components.
Progress0 / 4 steps
1
Create the HTML structure with a div for the shape
Write the basic HTML skeleton with html, head, and body tags. Inside the body, add a div with the class shape. This div will hold the irregular shape.
Tailwind
Hint

Start with a basic HTML page and add a div with class shape inside the body.

2
Add Tailwind classes for size and background color
Add Tailwind CSS classes to the div with class shape to set its width to w-64, height to h-64, and background color to bg-blue-500.
Tailwind
Hint

Use Tailwind classes w-64 for width, h-64 for height, and bg-blue-500 for background color.

3
Apply an irregular shape using CSS clip-path
Add a <style> block inside the <head> section. Inside it, write CSS for the class .shape that uses clip-path with the polygon points polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%) to create an irregular shape.
Tailwind
Hint

Use CSS clip-path with the polygon points exactly as given to create the shape.

4
Add a drop shadow using Tailwind CSS
Add the Tailwind CSS class shadow-lg to the div with class shape to create a large drop shadow around the irregular shape.
Tailwind
Hint

Add the Tailwind class shadow-lg to the div to create a visible drop shadow.

Practice

(1/5)
1. What is the main purpose of using a drop shadow on irregular shapes in Tailwind CSS?
easy
A. To add depth and make the shape stand out visually
B. To change the shape's color
C. To make the shape larger
D. To remove the shape's border

Solution

  1. Step 1: Understand drop shadow effect

    Drop shadows create a shadow behind an element, giving it a sense of depth.

  2. Step 2: Apply to irregular shapes

    Using drop shadows on irregular shapes helps them visually pop from the background.

  3. Final Answer:

    To add depth and make the shape stand out visually -> Option A

  4. Quick Check:

    Drop shadow purpose = add depth [OK]
Hint: Drop shadows make shapes look lifted and clear [OK]
Common Mistakes:
  • Thinking drop shadows change color
  • Confusing drop shadows with resizing
  • Assuming drop shadows remove borders
2. Which Tailwind CSS class correctly applies a custom drop shadow with a blur radius of 5px and offset of 3px 3px?
easy
A. drop-shadow-3-3-5
B. shadow-3px-3px-5px
C. shadow-custom(3px,3px,5px)
D. shadow-[drop-shadow(3px_3px_5px_rgba(0,0,0,0.5))]

Solution

  1. Step 1: Recognize Tailwind custom shadow syntax

    Tailwind uses square brackets for custom CSS values, e.g., shadow-[drop-shadow(...)]

  2. Step 2: Match the correct CSS drop-shadow format

    The correct CSS function is drop-shadow(offsetX offsetY blurRadius color), here 3px 3px 5px rgba(0,0,0,0.5)

  3. Final Answer:

    shadow-[drop-shadow(3px_3px_5px_rgba(0,0,0,0.5))] -> Option D

  4. Quick Check:

    Custom drop shadow syntax = shadow-[drop-shadow(...)] [OK]
Hint: Use square brackets with drop-shadow(...) inside shadow- class [OK]
Common Mistakes:
  • Missing square brackets for custom values
  • Using invalid class names without brackets
  • Confusing drop-shadow with shadow utilities
3. Given this HTML and Tailwind CSS snippet:
<div class="w-40 h-40 bg-blue-500 clip-path-[polygon(50%_0%,100%_50%,50%_100%,0%_50%)] shadow-[drop-shadow(4px_4px_6px_rgba(0,0,0,0.4))]"></div>

What will you see rendered in the browser?
medium
A. A blue square with no shadow
B. A blue diamond shape with a soft shadow offset to bottom-right
C. A blue circle with a sharp shadow
D. A blue triangle with a shadow on top-left

Solution

  1. Step 1: Analyze clip-path polygon points

    The polygon points create a diamond shape by connecting top, right, bottom, and left midpoints.

  2. Step 2: Understand drop shadow parameters

    The drop shadow is offset 4px right and 4px down with a 6px blur and semi-transparent black color, creating a soft shadow bottom-right.

  3. Final Answer:

    A blue diamond shape with a soft shadow offset to bottom-right -> Option B

  4. Quick Check:

    clip-path diamond + drop shadow offset = diamond with shadow [OK]
Hint: Polygon points define shape; drop-shadow offsets shadow direction [OK]
Common Mistakes:
  • Ignoring clip-path shape and expecting a square
  • Confusing shadow offset direction
  • Assuming circle shape from polygon
4. You wrote this Tailwind class for an irregular shape shadow:
shadow-[drop-shadow(5px 5px 10px rgba(0,0,0,0.3))]
But the shadow does not appear. What is the likely issue?
medium
A. Spaces inside square brackets should be replaced with underscores
B. The rgba color is invalid
C. Drop shadow does not work with clip-path
D. The shadow class must be placed on a parent element

Solution

  1. Step 1: Check Tailwind custom class syntax

    Tailwind requires no spaces inside square brackets for custom values; spaces must be replaced with underscores.

  2. Step 2: Confirm correct syntax for drop-shadow

    Correct syntax is shadow-[drop-shadow(5px_5px_10px_rgba(0,0,0,0.3))] with underscores instead of spaces.

  3. Final Answer:

    Spaces inside square brackets should be replaced with underscores -> Option A

  4. Quick Check:

    Custom class spaces = underscores [OK]
Hint: Replace spaces with underscores inside custom bracket classes [OK]
Common Mistakes:
  • Leaving spaces inside square brackets
  • Assuming rgba color is wrong
  • Thinking drop shadow can't be used with clip-path
5. You want to create a star shape with a drop shadow using Tailwind CSS. Which combination of classes correctly applies a star clip-path and a subtle drop shadow offset to the bottom-right?
hard
A. clip-path-star shadow-[drop-shadow(4px_4px_10px_rgba(0,0,0,0.5))]
B. clip-star shadow-drop(2px_2px_4px_rgba(0,0,0,0.25))
C. clip-path-[polygon(50%_0%,61%_35%,98%_35%,68%_57%,79%_91%,50%_70%,21%_91%,32%_57%,2%_35%,39%_35%)] shadow-[drop-shadow(2px_2px_4px_rgba(0,0,0,0.25))]
D. clip-polygon-star shadow-[drop-shadow(0_0_0_rgba(0,0,0,0))]

Solution

  1. Step 1: Identify correct clip-path polygon for star

    The polygon points in clip-path-[polygon(50%_0%,61%_35%,98%_35%,68%_57%,79%_91%,50%_70%,21%_91%,32%_57%,2%_35%,39%_35%)] shadow-[drop-shadow(2px_2px_4px_rgba(0,0,0,0.25))] define a star shape using percentages and underscores for spaces.

  2. Step 2: Check drop shadow syntax and subtlety

    clip-path-[polygon(50%_0%,61%_35%,98%_35%,68%_57%,79%_91%,50%_70%,21%_91%,32%_57%,2%_35%,39%_35%)] shadow-[drop-shadow(2px_2px_4px_rgba(0,0,0,0.25))] uses shadow-[drop-shadow(2px_2px_4px_rgba(0,0,0,0.25))], a subtle shadow offset bottom-right with correct syntax.

  3. Final Answer:

    clip-path-polygon star with subtle drop shadow using underscores -> Option C

  4. Quick Check:

    Star shape + correct drop shadow syntax = clip-path-[polygon(50%_0%,61%_35%,98%_35%,68%_57%,79%_91%,50%_70%,21%_91%,32%_57%,2%_35%,39%_35%)] shadow-[drop-shadow(2px_2px_4px_rgba(0,0,0,0.25))] [OK]
Hint: Use polygon points with underscores and subtle rgba shadow [OK]
Common Mistakes:
  • Using invalid class names like clip-star
  • Incorrect drop shadow syntax without brackets
  • No shadow or zero offset shadow