text-shadow
En esta página
CustomizingYourTheme, CustomizingYourThemeColors, ResponsiveDesign, UsingACustomValue, } from "@/components/content.tsx";
| Clase | Propiedades CSS |
|---|---|
text-shadow-2xs |
text-shadow: var(--text-shadow-2xs); /* 0px 1px 0px rgb(0 0 0 / 0.15) */ |
text-shadow-xs |
text-shadow: var(--text-shadow-xs); /* 0px 1px 1px rgb(0 0 0 / 0.2) */ |
text-shadow-sm |
text-shadow: var(--text-shadow-sm); /* 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075) */ |
text-shadow-md |
text-shadow: var(--text-shadow-md); /* 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1) */ |
text-shadow-lg |
text-shadow: var(--text-shadow-lg); /* 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1) */ |
text-shadow-none |
text-shadow: none; |
text-shadow-(<custom-property>) |
text-shadow: var(<custom-property>); |
text-shadow-(color:<custom-property>) |
--tw-shadow-color var(<custom-property>); |
text-shadow-[<value>] |
text-shadow: <value>; |
text-shadow-inherit |
--tw-shadow-color inherit; |
text-shadow-current |
--tw-shadow-color currentColor; |
text-shadow-transparent |
--tw-shadow-color transparent; |
Examples#
Basic example#
Use utilities like text-shadow-sm and shadow-lg to apply different sized text shadows to a text element:
{
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<!-- [!code classes:text-shadow-2xs,text-shadow-xs,text-shadow-sm,text-shadow-md,text-shadow-lg,text-shadow-xl] -->
<p class="text-shadow-2xs ...">The quick brown fox...</p>
<p class="text-shadow-xs ...">The quick brown fox...</p>
<p class="text-shadow-sm ...">The quick brown fox...</p>
<p class="text-shadow-md ...">The quick brown fox...</p>
<p class="text-shadow-lg ...">The quick brown fox...</p>
Changing the opacity#
Use the opacity modifier to adjust the opacity of the text shadow:
{
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<!-- [!code classes:text-shadow-lg/20,text-shadow-lg/30] -->
<p class="text-shadow-lg ...">The quick brown fox...</p>
<p class="text-shadow-lg/20 ...">The quick brown fox...</p>
<p class="text-shadow-lg/30 ...">The quick brown fox...</p>
The default text shadow opacities are quite low (20% or less), so increasing the opacity (to like 50%) will make the text shadows more pronounced.
Setting the shadow color#
Use utilities like text-shadow-indigo-500 and text-shadow-cyan-500/50 to change the color of a text shadow:
{
<!-- [!code classes:text-shadow-sky-300] -->
<button class="text-sky-950 text-shadow-2xs text-shadow-sky-300 ...">Book a demo</button>
<button class="text-gray-950 dark:text-white dark:text-shadow-2xs ...">See pricing</button>
By default colored shadows have an opacity of 100% but you can adjust this using the opacity modifier.
Removing a text shadow#
Use the text-shadow-none utility to remove an existing text shadow from an element:
<!-- [!code classes:dark:text-shadow-none] -->
<p class="text-shadow-lg dark:text-shadow-none">
<!-- ... -->
</p>