Text Shadow

Tailwind CSS Text Shadow

In Tailwind CSS, you can easily add text shadows to your elements using utility classes. Text shadows can be used to create depth and dimension, making text stand out against its background.

Text Shadows

Following are some examples of text shadows in tailwind css.

  • Text Shadow: Small
  • Text Shadow: Default
  • Text Shadow: Large
  • Text Shadow: Arbitrary (Custom Color)
  • Text Shadow: Arbitrary (Tailwind CSS Color) 
<ul class="space-y-8  w-full h-96 p-8 flex items-center justify-center gap-2 flex-col bg-white rounded-xl">
      <li class="[text-shadow:_0_2px_4px_rgb(99_102_241_/_0.8)] text-indigo-600 text-xl md:text-2xl leading-snug font-manrope font-extrabold">Text Shadow: Small</li>
      <li class="[text-shadow:_0_4px_4px_rgb(99_102_241_/_0.8)] text-indigo-600 text-xl md:text-2xl leading-snug font-manrope font-extrabold">Text Shadow: Default</li>
      <li class="[text-shadow:_0_8px_8px_rgb(99_102_241_/_0.8)] text-indigo-600 text-xl md:text-2xl leading-snug font-manrope font-extrabold">Text Shadow: Large</li>
      <li class="[text-shadow:_0_4px_8px_#00BCD4] text-[#00BCD4] text-xl md:text-2xl leading-snug font-manrope font-extrabold">Text Shadow: Arbitrary (Custom Color)</li>
      <li class="[text-shadow:_0_4px_8px_rgba(14_165_223_/_0.5)] text-sky-400 text-xl md:text-2xl leading-snug font-manrope font-extrabold"> Text Shadow: Arbitrary (Tailwind CSS Color) </li>
      </ul>