filter: drop-shadow()
En esta página
CustomizingYourTheme, ResponsiveDesign, UsingACustomValue, CustomizingYourThemeColors, } from "@/components/content.tsx";
| Clase | Propiedades CSS |
|---|---|
drop-shadow-xs |
filter: drop-shadow(var(--drop-shadow-xs)); /* 0 1px 1px rgb(0 0 0 / 0.05) */ |
drop-shadow-sm |
filter: drop-shadow(var(--drop-shadow-sm)); /* 0 1px 2px rgb(0 0 0 / 0.15) */ |
drop-shadow-md |
filter: drop-shadow(var(--drop-shadow-md)); /* 0 3px 3px rgb(0 0 0 / 0.12) */ |
drop-shadow-lg |
filter: drop-shadow(var(--drop-shadow-lg)); /* 0 4px 4px rgb(0 0 0 / 0.15) */ |
drop-shadow-xl |
filter: drop-shadow(var(--drop-shadow-xl); /* 0 9px 7px rgb(0 0 0 / 0.1) */ |
drop-shadow-2xl |
filter: drop-shadow(var(--drop-shadow-2xl)); /* 0 25px 25px rgb(0 0 0 / 0.15) */ |
drop-shadow-none |
filter: drop-shadow(0 0 #0000); |
drop-shadow-(<custom-property>) |
filter: drop-shadow(var(<custom-property>)); |
drop-shadow-(color:<custom-property>) |
--tw-drop-shadow-color: var(<custom-property>); |
drop-shadow-[<value>] |
filter: drop-shadow(<value>); |
drop-shadow-inherit |
--tw-drop-shadow-color: inherit; |
drop-shadow-current |
--tw-drop-shadow-color: currentColor; |
drop-shadow-transparent |
--tw-drop-shadow-color: transparent; |
Examples#
Basic example#
Use utilities like drop-shadow-sm and drop-shadow-xl to add a drop shadow to an element:
{
drop-shadow-md
drop-shadow-lg
drop-shadow-xl
<!-- [!code classes:drop-shadow-md,drop-shadow-lg,drop-shadow-xl] -->
<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.
Changing the opacity#
Use the opacity modifier to adjust the opacity of the drop shadow:
{
drop-shadow-xl
drop-shadow-xl/25
drop-shadow-xl/50
<!-- [!code classes:drop-shadow-xl,drop-shadow-xl/25,drop-shadow-xl/50] -->
<svg class="fill-white drop-shadow-xl ...">...</svg>
<svg class="fill-white drop-shadow-xl/25 ...">...</svg>
<svg class="fill-white drop-shadow-xl/50 ...">...</svg>
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-indigo-500 and drop-shadow-cyan-500/50 to change the color of a drop shadow:
{
drop-shadow-cyan-500/50
drop-shadow-indigo-500/50
<!-- [!code classes:drop-shadow-cyan-500/50,drop-shadow-indigo-500/50] -->
<svg class="fill-cyan-500 drop-shadow-lg drop-shadow-cyan-500/50 ...">...</svg>
<svg class="fill-indigo-500 drop-shadow-lg drop-shadow-indigo-500/50 ...">...</svg>
By default colored shadows have an opacity of 100% but you can adjust this using the opacity modifier.
Removing a drop shadow#
Use the drop-shadow-none utility to remove an existing drop shadow from an element:
<!-- [!code classes:dark:drop-shadow-none] -->
<svg class="drop-shadow-lg dark:drop-shadow-none">
<!-- ... -->
</svg>