Utilities for applying drop-shadow filters to an element. import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue, CustomizingYourThemeColors, } from "@/components/content.tsx";
Use utilities like drop-shadow-sm and drop-shadow-xl to add a drop shadow to an element:
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.
Use the opacity modifier to adjust the opacity of the drop shadow:
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.
Use utilities like drop-shadow-indigo-500 and drop-shadow-cyan-500/50 to change the color of a drop shadow:
By default colored shadows have an opacity of 100% but you can adjust this using the opacity modifier.
Use the drop-shadow-none utility to remove an existing drop shadow from an element: