Search code examples
tailwind-css

How to make a shadow from one side with tailwind

I'm trying to make a shadow from one side only, from the right side with tailwind. If I use shadow-xl it adds the shadow to all sides.

Solution

  • You could do these by adding arbitrary values to the shadow.

    <div class="relative h-screen bg-red-50">
  <div class="absolute inset-20 h-12 w-36 rounded-lg bg-indigo-500 shadow-[rgba(0,0,15,0.5)_10px_5px_4px_0px]">shadow</div>
</div>

    Here's a live demo. I hope this helps you.