filter: drop-shadow()

Examples

Basic example

Use utilities like drop-shadow-sm and drop-shadow-xl to add a drop shadow to an element:

<svg class="drop-shadow-md ...">  <!-- ... --></svg><svg class="drop-shadow-lg ...">  <!-- ... --></svg><svg class="drop-shadow-xl ...">  <!-- ... --></svg>

This is useful for applying shadows to irregular shapes, like text and SVG elements. For applying shadows to regular elements, you probably want to use box shadow instead.

Using a custom value

Use the drop-shadow-[<value>] syntax to set the drop shadow based on a completely custom value:

<svg class="drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)] ...">  <!-- ... --></svg>

For CSS variables, you can also use the drop-shadow-(<custom-property>) syntax:

<svg class="drop-shadow-(--my-drop-shadow) ...">  <!-- ... --></svg>

This is just a shorthand for drop-shadow-[var(<custom-property>)] that adds the var() function for you automatically.

Responsive design

Prefix a filter: drop-shadow() utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<svg class="drop-shadow-md md:drop-shadow-xl ...">  <!-- ... --></svg>

Learn more about using variants in the variants documentation.

Customizing your theme

Use the --drop-shadow-* theme variables to customize the drop shadow utilities in your project:

@theme {  --drop-shadow-3xl: 0 35px 35px rgba(0, 0, 0, 0.25); }

Now the drop-shadow-3xl utility can be used in your markup:

<svg class="drop-shadow-3xl">  <!-- ... --></svg>

Learn more about customizing your theme in the theme documentation.