0
0
Tailwindmarkup~5 mins

Drop shadow on irregular shapes in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Drop shadows add depth and make shapes stand out. They help users see elements clearly, even if the shape is not a simple square or circle.

You want to highlight a button with a unique shape on your webpage.
You have an image with a custom shape and want a shadow that follows its outline.
You want to create a card with a fancy border and a shadow that matches the shape.
You want to improve the look of icons or logos that are not simple shapes.
You want to add a subtle shadow effect to irregular shapes for better visual appeal.
Syntax
Tailwind
<div class="shadow-[drop-shadow(4px_4px_6px_rgba(0,0,0,0.4))]">Your content</div>

Use shadow-[drop-shadow(...)] to apply custom drop shadows in Tailwind.

Inside the parentheses, write the CSS drop-shadow values: offset-x, offset-y, blur-radius, and color.

Examples
A blue circle with a soft drop shadow offset by 5 pixels right and down.
Tailwind
<div class="shadow-[drop-shadow(5px_5px_5px_rgba(0,0,0,0.5))] rounded-full bg-blue-400 w-24 h-24"></div>
A diamond shape with a subtle drop shadow using a polygon clip path.
Tailwind
<div class="shadow-[drop-shadow(3px_3px_4px_rgba(0,0,0,0.3))] bg-pink-300 w-32 h-20 clip-path-[polygon(50%_0%,_100%_50%,_50%_100%,_0%_50%)]"></div>
An irregular rounded shape with a dark drop shadow.
Tailwind
<div class="shadow-[drop-shadow(2px_2px_3px_rgba(0,0,0,0.6))] bg-green-500 w-40 h-24 rounded-[30%_70%_70%_30%_/_30%_30%_70%_70%]"></div>
Sample Program

This page shows three shapes with drop shadows using Tailwind's custom shadow syntax. The first is a circle, the second is a diamond shape using a polygon clip path, and the third is an irregular polygon shape. Each shape has a shadow that follows its outline, making them stand out on the light background.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Drop Shadow on Irregular Shapes</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    .clip-diamond {
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    }
    .clip-irregular {
      clip-path: polygon(30% 0%, 70% 10%, 90% 50%, 70% 90%, 30% 100%, 10% 50%);
    }
  </style>
</head>
<body class="flex flex-col items-center justify-center min-h-screen gap-12 bg-gray-100 p-6">
  <h1 class="text-2xl font-semibold mb-4">Drop Shadow on Irregular Shapes</h1>

  <div class="shadow-[drop-shadow(6px_6px_8px_rgba(0,0,0,0.4))] bg-purple-500 w-32 h-32 rounded-full"></div>

  <div class="shadow-[drop-shadow(4px_4px_6px_rgba(0,0,0,0.35))] bg-pink-400 w-40 h-40 clip-diamond"></div>

  <div class="shadow-[drop-shadow(5px_5px_7px_rgba(0,0,0,0.5))] bg-green-600 w-48 h-48 clip-irregular"></div>

</body>
</html>
OutputSuccess
Important Notes

Use clip-path CSS to create irregular shapes that shadows can follow.

Tailwind's shadow-[drop-shadow(...)] allows custom shadows beyond the default presets.

Test shadows on different backgrounds to ensure good contrast and visibility.

Summary

Drop shadows add depth and help shapes stand out visually.

Use Tailwind's custom shadow-[drop-shadow(...)] syntax for irregular shapes.

Combine with clip-path to create and shadow any shape you want.