shadow-inner

The shadow-inner class belongs to the box shadow group within the effects category.

Example Usage

Here is an example of how to use shadow-inner:

<div class="bg-gray-300 w-48 h-48 flex items-center justify-center">
  <div class="shadow-inner shadow-gray-500/80 p-4 w-32 h-32 rounded-lg bg-white"></div>
</div>

Resulting CSS

--tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

Other Box shadow Classes

Get Tailwind Scanner!

The absolute must-have tool for anyone using Tailwind CSS.

Scan, Edit, Export any tailwind site in browser to create the perfect UI - download the chrome extension!