Drop Shadow

Use drop-shadow utilities to add a drop shadow filter to an element. Unlike box-shadow, drop-shadow follows the shape of the element (including transparency).

Basic example

Use utilities like drop-shadow-md and drop-shadow-xl to apply different sized drop shadows to an element:

Style('drop-shadow-md ...', children: [
  // ...
])
Style('drop-shadow-lg ...', children: [
  // ...
])
Style('drop-shadow-xl ...', children: [
  // ...
])

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

Changing the opacity

Use the opacity modifier to adjust the opacity of the drop shadow:

Style('drop-shadow-xl ...', child: Text('...'))
Style('drop-shadow-xl/25 ...', child: Text('...'))
Style('drop-shadow-xl/50 ...', child: Text('...'))

The default drop shadow opacities are quite low (15% or less), so increasing the opacity (to like 50%) will make the drop shadows more pronounced.

Setting the shadow color

Use utilities like drop-shadow-cyan-500/50 and drop-shadow-indigo-500/50 to change the color of a drop shadow:

Style('drop-shadow-xl drop-shadow-cyan-500/50 ...', child: Text('...'))
Style('drop-shadow-xl drop-shadow-indigo-500/50 ...', child: Text('...'))

By default colored shadows have an opacity of 100% but you can adjust this using the opacity modifier.

Class reference

Class	Description
drop-shadow-xs	Apply an extra small drop shadow
drop-shadow-sm	Apply a small drop shadow
drop-shadow	Apply a normal drop shadow
drop-shadow-md	Apply a medium drop shadow
drop-shadow-lg	Apply a large drop shadow
drop-shadow-xl	Apply an extra large drop shadow
drop-shadow-2xl	Apply a 2x extra large drop shadow
drop-shadow-none	Remove drop shadow
drop-shadow-{color}	Override the drop shadow color (e.g. drop-shadow-cyan-500)
drop-shadow-{color}/{opacity}	Color override with explicit alpha (e.g. drop-shadow-cyan-500/50)
drop-shadow-{size}/{opacity}	Size with alpha override (e.g. drop-shadow-xl/50)