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