Built in Shadows

Animate the box shadow and svg shadow effect on any element or text using Torus Kit

Overview

Add or remove the shadow from element on various triggers. You can also modify the current shadow defined by .shadow or .svg-shadow Shadow utility class. When using svg-shadow-*, you can add a shadow into element of any shape. This means that SVG shadow works also on images, SVG shapes or even on text elements. Add Shadow color to change the element appearance, or change the Shadow intensity to make the shadow stronger or lighter.

Examples

Hover this text

Hover this button
<div class="rounded bg-primary bg-opacity-20 shadow shadow-primary p-5 h-15rem" data-tor="hover:[shadow(risen) push.up(xs)]">
  <h2 class="h2 text-white svg-shadow-sm" data-tor="hover:[svg-shadow(lg) shadow-intensity(xl)]">Hover this text</h2>
  <div class="btn btn-primary shadow-primary shadow-strong" data-tor="!hover:svg-shadow(lg)">Hover this button</div>
</div>

Triggers

To add a shadow animation when <trigger> is performed on a single element, use data-tor-fx="<trigger>:shadow(<variant>) where <trigger> is:

  • inview: - when element appears in the viewport and gets .inview class
  • active: - when element gets .active class
  • show: - when element gets .show class
  • hover: - when element gets :hover state
shadow(xs)
shadow(sm)
shadow(md)
shadow(lg)
shadow(xl)
shadow(pop)
shadow(risen)
<div class="bg-transparent border" data-tor="hover:shadow(xs)">shadow(xs)</div>
<div class="bg-transparent border" data-tor="hover:shadow(sm)">shadow(sm)</div>
<div class="bg-transparent border" data-tor="hover:shadow(md)">shadow(md)</div>
<div class="bg-transparent border" data-tor="hover:shadow(lg)">shadow(lg)</div>
<div class="bg-transparent border" data-tor="hover:shadow(xl)">shadow(xl)</div>
<div class="bg-transparent border" data-tor="hover:shadow(pop)">shadow(pop)</div>
<div class="bg-transparent border" data-tor="hover:shadow(risen)">shadow(risen)</div>
shadow(xs)
shadow(sm)
shadow(md)
shadow(lg)
shadow(xl)
shadow(pop)
shadow(risen)
<div class="bg-transparent border" data-tor="active:shadow(xs)">shadow(xs)</div>
<div class="bg-transparent border" data-tor="active:shadow(sm)">shadow(sm)</div>
<div class="bg-transparent border" data-tor="active:shadow(md)">shadow(md)</div>
<div class="bg-transparent border" data-tor="active:shadow(lg)">shadow(lg)</div>
<div class="bg-transparent border" data-tor="active:shadow(xl)">shadow(xl)</div>
<div class="bg-transparent border" data-tor="active:shadow(pop)">shadow(pop)</div>
<div class="bg-transparent border" data-tor="active:shadow(risen)">shadow(risen)</div>
shadow(xs)
shadow(sm)
shadow(md)
shadow(lg)
shadow(xl)
shadow(pop)
shadow(risen)
<div class="bg-transparent border" data-tor="inview:shadow(xs)">shadow(xs)</div>
<div class="bg-transparent border" data-tor="inview:shadow(sm)">shadow(sm)</div>
<div class="bg-transparent border" data-tor="inview:shadow(md)">shadow(md)</div>
<div class="bg-transparent border" data-tor="inview:shadow(lg)">shadow(lg)</div>
<div class="bg-transparent border" data-tor="inview:shadow(xl)">shadow(xl)</div>
<div class="bg-transparent border" data-tor="inview:shadow(pop)">shadow(pop)</div>
<div class="bg-transparent border" data-tor="inview:shadow(risen)">shadow(risen)</div>

Parent triggers

To add a shadow animation when <trigger> is performed on a single element, use data-tor-fx="<trigger>:shadow(<variant>) where <trigger> is:

  • inview: - when element appears in the viewport and gets .inview class
  • active: - when element gets .active class
  • show: - when element gets .show class
  • hover: - when element gets :hover state
shadow(xs)
shadow(sm)
shadow(md)
shadow(lg)
shadow(xl)
shadow(pop)
shadow(risen)
<div class="bg-white" data-tor="hover(p):shadow(xs)">shadow(xs)</div>
<div class="bg-white" data-tor="hover(p):shadow(sm)">shadow(sm)</div>
<div class="bg-white" data-tor="hover(p):shadow(md)">shadow(md)</div>
<div class="bg-white" data-tor="hover(p):shadow(lg)">shadow(lg)</div>
<div class="bg-white" data-tor="hover(p):shadow(xl)">shadow(xl)</div>
<div class="bg-white" data-tor="hover(p):shadow(pop)">shadow(pop)</div>
<div class="bg-white" data-tor="hover(p):shadow(risen)">shadow(risen)</div>
shadow(xs)
shadow(sm)
shadow(md)
shadow(lg)
shadow(xl)
shadow(pop)
shadow(risen)
<div class="bg-white" data-tor="active(p):shadow(xs)">shadow(xs)</div>
<div class="bg-white" data-tor="active(p):shadow(sm)">shadow(sm)</div>
<div class="bg-white" data-tor="active(p):shadow(md)">shadow(md)</div>
<div class="bg-white" data-tor="active(p):shadow(lg)">shadow(lg)</div>
<div class="bg-white" data-tor="active(p):shadow(xl)">shadow(xl)</div>
<div class="bg-white" data-tor="active(p):shadow(pop)">shadow(pop)</div>
<div class="bg-white" data-tor="active(p):shadow(risen)">shadow(risen)</div>
shadow(xs)
shadow(sm)
shadow(md)
shadow(lg)
shadow(xl)
shadow(pop)
shadow(risen)
<div class="bg-white" data-tor="inview(p):shadow(xs)">shadow(xs)</div>
<div class="bg-white" data-tor="inview(p):shadow(sm)">shadow(sm)</div>
<div class="bg-white" data-tor="inview(p):shadow(md)">shadow(md)</div>
<div class="bg-white" data-tor="inview(p):shadow(lg)">shadow(lg)</div>
<div class="bg-white" data-tor="inview(p):shadow(xl)">shadow(xl)</div>
<div class="bg-white" data-tor="inview(p):shadow(pop)">shadow(pop)</div>
<div class="bg-white" data-tor="inview(p):shadow(risen)">shadow(risen)</div>

Modifications

Shadow intensity

Give the shadow some intensity by adding shadow-intensity(<value>), where <value> is one of xs, sm, md, lg, xl or use own custom <number> value.

Triggers
shadow-intensity(xs)
shadow-intensity(sm)
shadow-intensity(md)
shadow-intensity(lg)
shadow-intensity(xl)
shadow-intensity(5)
<div class="bg-transparent border shadow" data-tor="hover:shadow-intensity(xs)">shadow-intensity(xs)</div>
<div class="bg-transparent border shadow" data-tor="hover:shadow-intensity(sm)">shadow-intensity(sm)</div>
<div class="bg-transparent border shadow" data-tor="hover:shadow-intensity(md)">shadow-intensity(md)</div>
<div class="bg-transparent border shadow" data-tor="hover:shadow-intensity(lg)">shadow-intensity(lg)</div>
<div class="bg-transparent border shadow" data-tor="hover:shadow-intensity(xl)">shadow-intensity(xl)</div>
<div class="bg-transparent border shadow" data-tor="hover:shadow-intensity(5)">shadow-intensity(5)</div>
shadow-intensity(xs)
shadow-intensity(sm)
shadow-intensity(md)
shadow-intensity(lg)
shadow-intensity(xl)
shadow-intensity(5)
<div class="bg-transparent border shadow" data-tor="active:shadow-intensity(xs)">shadow-intensity(xs)</div>
<div class="bg-transparent border shadow" data-tor="active:shadow-intensity(sm)">shadow-intensity(sm)</div>
<div class="bg-transparent border shadow" data-tor="active:shadow-intensity(md)">shadow-intensity(md)</div>
<div class="bg-transparent border shadow" data-tor="active:shadow-intensity(lg)">shadow-intensity(lg)</div>
<div class="bg-transparent border shadow" data-tor="active:shadow-intensity(xl)">shadow-intensity(xl)</div>
<div class="bg-transparent border shadow" data-tor="active:shadow-intensity(5)">shadow-intensity(5)</div>
shadow-intensity(xs)
shadow-intensity(sm)
shadow-intensity(md)
shadow-intensity(lg)
shadow-intensity(xl)
shadow-intensity(5)
<div class="bg-transparent border shadow" data-tor="inview:shadow-intensity(xs)">shadow-intensity(xs)</div>
<div class="bg-transparent border shadow" data-tor="inview:shadow-intensity(sm)">shadow-intensity(sm)</div>
<div class="bg-transparent border shadow" data-tor="inview:shadow-intensity(md)">shadow-intensity(md)</div>
<div class="bg-transparent border shadow" data-tor="inview:shadow-intensity(lg)">shadow-intensity(lg)</div>
<div class="bg-transparent border shadow" data-tor="inview:shadow-intensity(xl)">shadow-intensity(xl)</div>
<div class="bg-transparent border shadow" data-tor="inview:shadow-intensity(5)">shadow-intensity(5)</div>
Parent triggers
shadow-intensity(xs)
shadow-intensity(sm)
shadow-intensity(md)
shadow-intensity(lg)
shadow-intensity(xl)
shadow-intensity(5)
<div class="bg-white shadow" data-tor="hover(p):shadow-intensity(xs)">shadow-intensity(xs)</div>
<div class="bg-white shadow" data-tor="hover(p):shadow-intensity(sm)">shadow-intensity(sm)</div>
<div class="bg-white shadow" data-tor="hover(p):shadow-intensity(md)">shadow-intensity(md)</div>
<div class="bg-white shadow" data-tor="hover(p):shadow-intensity(lg)">shadow-intensity(lg)</div>
<div class="bg-white shadow" data-tor="hover(p):shadow-intensity(xl)">shadow-intensity(xl)</div>
<div class="bg-white shadow" data-tor="hover(p):shadow-intensity(5)">shadow-intensity(5)</div>
shadow-intensity(xs)
shadow-intensity(sm)
shadow-intensity(md)
shadow-intensity(lg)
shadow-intensity(xl)
shadow-intensity(5)
<div class="bg-white shadow" data-tor="active(p):shadow-intensity(xs)">shadow-intensity(xs)</div>
<div class="bg-white shadow" data-tor="active(p):shadow-intensity(sm)">shadow-intensity(sm)</div>
<div class="bg-white shadow" data-tor="active(p):shadow-intensity(md)">shadow-intensity(md)</div>
<div class="bg-white shadow" data-tor="active(p):shadow-intensity(lg)">shadow-intensity(lg)</div>
<div class="bg-white shadow" data-tor="active(p):shadow-intensity(xl)">shadow-intensity(xl)</div>
<div class="bg-white shadow" data-tor="active(p):shadow-intensity(5)">shadow-intensity(5)</div>
shadow-intensity(xs)
shadow-intensity(sm)
shadow-intensity(md)
shadow-intensity(lg)
shadow-intensity(xl)
shadow-intensity(5)
<div class="bg-white shadow" data-tor="inview(p):shadow-intensity(xs)">shadow-intensity(xs)</div>
<div class="bg-white shadow" data-tor="inview(p):shadow-intensity(sm)">shadow-intensity(sm)</div>
<div class="bg-white shadow" data-tor="inview(p):shadow-intensity(md)">shadow-intensity(md)</div>
<div class="bg-white shadow" data-tor="inview(p):shadow-intensity(lg)">shadow-intensity(lg)</div>
<div class="bg-white shadow" data-tor="inview(p):shadow-intensity(xl)">shadow-intensity(xl)</div>
<div class="bg-white shadow" data-tor="inview(p):shadow-intensity(5)">shadow-intensity(5)</div>

Shadow color

Triggers
shadow-color(primary)
shadow-color(secondary)
shadow-color(success)
shadow-color(danger)
shadow-color(warning)
shadow-color(info)
shadow-color(light)
shadow-color(dark)
shadow-color(white)
shadow-color(transparent)
<div class="bg-transparent border shadow-lg" data-tor="hover:shadow-color(primary)">shadow-color(primary)</div>
<div class="bg-transparent border shadow-lg" data-tor="hover:shadow-color(secondary)">shadow-color(secondary)</div>
<div class="bg-transparent border shadow-lg" data-tor="hover:shadow-color(success)">shadow-color(success)</div>
<div class="bg-transparent border shadow-lg" data-tor="hover:shadow-color(danger)">shadow-color(danger)</div>
<div class="bg-transparent border shadow-lg" data-tor="hover:shadow-color(warning)">shadow-color(warning)</div>
<div class="bg-transparent border shadow-lg" data-tor="hover:shadow-color(info)">shadow-color(info)</div>
<div class="bg-transparent border shadow-lg" data-tor="hover:shadow-color(light)">shadow-color(light)</div>
<div class="bg-transparent border shadow-lg" data-tor="hover:shadow-color(dark)">shadow-color(dark)</div>
<div class="bg-transparent border shadow-lg" data-tor="hover:shadow-color(white)">shadow-color(white)</div>
<div class="bg-transparent border shadow-lg" data-tor="hover:shadow-color(transparent)">shadow-color(transparent)</div>
shadow-color(primary)
shadow-color(secondary)
shadow-color(success)
shadow-color(danger)
shadow-color(warning)
shadow-color(info)
shadow-color(light)
shadow-color(dark)
shadow-color(white)
shadow-color(transparent)
<div class="bg-transparent border shadow-lg" data-tor="active:shadow-color(primary)">shadow-color(primary)</div>
<div class="bg-transparent border shadow-lg" data-tor="active:shadow-color(secondary)">shadow-color(secondary)</div>
<div class="bg-transparent border shadow-lg" data-tor="active:shadow-color(success)">shadow-color(success)</div>
<div class="bg-transparent border shadow-lg" data-tor="active:shadow-color(danger)">shadow-color(danger)</div>
<div class="bg-transparent border shadow-lg" data-tor="active:shadow-color(warning)">shadow-color(warning)</div>
<div class="bg-transparent border shadow-lg" data-tor="active:shadow-color(info)">shadow-color(info)</div>
<div class="bg-transparent border shadow-lg" data-tor="active:shadow-color(light)">shadow-color(light)</div>
<div class="bg-transparent border shadow-lg" data-tor="active:shadow-color(dark)">shadow-color(dark)</div>
<div class="bg-transparent border shadow-lg" data-tor="active:shadow-color(white)">shadow-color(white)</div>
<div class="bg-transparent border shadow-lg" data-tor="active:shadow-color(transparent)">shadow-color(transparent)</div>
shadow-color(primary)
shadow-color(secondary)
shadow-color(success)
shadow-color(danger)
shadow-color(warning)
shadow-color(info)
shadow-color(light)
shadow-color(dark)
shadow-color(white)
shadow-color(transparent)
<div class="bg-transparent border shadow-lg" data-tor="inview:shadow-color(primary)">shadow-color(primary)</div>
<div class="bg-transparent border shadow-lg" data-tor="inview:shadow-color(secondary)">shadow-color(secondary)</div>
<div class="bg-transparent border shadow-lg" data-tor="inview:shadow-color(success)">shadow-color(success)</div>
<div class="bg-transparent border shadow-lg" data-tor="inview:shadow-color(danger)">shadow-color(danger)</div>
<div class="bg-transparent border shadow-lg" data-tor="inview:shadow-color(warning)">shadow-color(warning)</div>
<div class="bg-transparent border shadow-lg" data-tor="inview:shadow-color(info)">shadow-color(info)</div>
<div class="bg-transparent border shadow-lg" data-tor="inview:shadow-color(light)">shadow-color(light)</div>
<div class="bg-transparent border shadow-lg" data-tor="inview:shadow-color(dark)">shadow-color(dark)</div>
<div class="bg-transparent border shadow-lg" data-tor="inview:shadow-color(white)">shadow-color(white)</div>
<div class="bg-transparent border shadow-lg" data-tor="inview:shadow-color(transparent)">shadow-color(transparent)</div>
Parent triggers
shadow-color(primary)
shadow-color(secondary)
shadow-color(success)
shadow-color(danger)
shadow-color(warning)
shadow-color(info)
shadow-color(light)
shadow-color(dark)
shadow-color(white)
shadow-color(transparent)
<div class="bg-white shadow-lg" data-tor="hover(p):shadow-color(primary)">shadow-color(primary)</div>
<div class="bg-white shadow-lg" data-tor="hover(p):shadow-color(secondary)">shadow-color(secondary)</div>
<div class="bg-white shadow-lg" data-tor="hover(p):shadow-color(success)">shadow-color(success)</div>
<div class="bg-white shadow-lg" data-tor="hover(p):shadow-color(danger)">shadow-color(danger)</div>
<div class="bg-white shadow-lg" data-tor="hover(p):shadow-color(warning)">shadow-color(warning)</div>
<div class="bg-white shadow-lg" data-tor="hover(p):shadow-color(info)">shadow-color(info)</div>
<div class="bg-white shadow-lg" data-tor="hover(p):shadow-color(light)">shadow-color(light)</div>
<div class="bg-white shadow-lg" data-tor="hover(p):shadow-color(dark)">shadow-color(dark)</div>
<div class="bg-white shadow-lg" data-tor="hover(p):shadow-color(white)">shadow-color(white)</div>
<div class="bg-white shadow-lg" data-tor="hover(p):shadow-color(transparent)">shadow-color(transparent)</div>
shadow-color(primary)
shadow-color(secondary)
shadow-color(success)
shadow-color(danger)
shadow-color(warning)
shadow-color(info)
shadow-color(light)
shadow-color(dark)
shadow-color(white)
shadow-color(transparent)
<div class="bg-white shadow-lg" data-tor="active(p):shadow-color(primary)">shadow-color(primary)</div>
<div class="bg-white shadow-lg" data-tor="active(p):shadow-color(secondary)">shadow-color(secondary)</div>
<div class="bg-white shadow-lg" data-tor="active(p):shadow-color(success)">shadow-color(success)</div>
<div class="bg-white shadow-lg" data-tor="active(p):shadow-color(danger)">shadow-color(danger)</div>
<div class="bg-white shadow-lg" data-tor="active(p):shadow-color(warning)">shadow-color(warning)</div>
<div class="bg-white shadow-lg" data-tor="active(p):shadow-color(info)">shadow-color(info)</div>
<div class="bg-white shadow-lg" data-tor="active(p):shadow-color(light)">shadow-color(light)</div>
<div class="bg-white shadow-lg" data-tor="active(p):shadow-color(dark)">shadow-color(dark)</div>
<div class="bg-white shadow-lg" data-tor="active(p):shadow-color(white)">shadow-color(white)</div>
<div class="bg-white shadow-lg" data-tor="active(p):shadow-color(transparent)">shadow-color(transparent)</div>
shadow-color(primary)
shadow-color(secondary)
shadow-color(success)
shadow-color(danger)
shadow-color(warning)
shadow-color(info)
shadow-color(light)
shadow-color(dark)
shadow-color(white)
shadow-color(transparent)
<div class="bg-white shadow-lg" data-tor="inview(p):shadow-color(primary)">shadow-color(primary)</div>
<div class="bg-white shadow-lg" data-tor="inview(p):shadow-color(secondary)">shadow-color(secondary)</div>
<div class="bg-white shadow-lg" data-tor="inview(p):shadow-color(success)">shadow-color(success)</div>
<div class="bg-white shadow-lg" data-tor="inview(p):shadow-color(danger)">shadow-color(danger)</div>
<div class="bg-white shadow-lg" data-tor="inview(p):shadow-color(warning)">shadow-color(warning)</div>
<div class="bg-white shadow-lg" data-tor="inview(p):shadow-color(info)">shadow-color(info)</div>
<div class="bg-white shadow-lg" data-tor="inview(p):shadow-color(light)">shadow-color(light)</div>
<div class="bg-white shadow-lg" data-tor="inview(p):shadow-color(dark)">shadow-color(dark)</div>
<div class="bg-white shadow-lg" data-tor="inview(p):shadow-color(white)">shadow-color(white)</div>
<div class="bg-white shadow-lg" data-tor="inview(p):shadow-color(transparent)">shadow-color(transparent)</div>

Shadow offset

Give the shadow some intensity by adding shadow-intensity(<value>), where <value> is one of xs, sm, md, lg, xl or use own custom <size> value.

Triggers
shadow-offset.down(xs)
shadow-offset.down(sm)
shadow-offset.down(md)
shadow-offset.down(lg)
shadow-offset.down(xl)
shadow-offset.down(1.5rem)
<div class="bg-transparent border shadow" data-tor="hover:shadow-offset.down(xs)">shadow-offset.down(xs)</div>
<div class="bg-transparent border shadow" data-tor="hover:shadow-offset.down(sm)">shadow-offset.down(sm)</div>
<div class="bg-transparent border shadow" data-tor="hover:shadow-offset.down(md)">shadow-offset.down(md)</div>
<div class="bg-transparent border shadow" data-tor="hover:shadow-offset.down(lg)">shadow-offset.down(lg)</div>
<div class="bg-transparent border shadow" data-tor="hover:shadow-offset.down(xl)">shadow-offset.down(xl)</div>
<div class="bg-transparent border shadow" data-tor="hover:shadow-offset.down(1.5rem)">shadow-offset.down(1.5rem)</div>
shadow-offset.down(xs)
shadow-offset.down(sm)
shadow-offset.down(md)
shadow-offset.down(lg)
shadow-offset.down(xl)
shadow-offset.down(1.5rem)
<div class="bg-transparent border shadow" data-tor="active:shadow-offset.down(xs)">shadow-offset.down(xs)</div>
<div class="bg-transparent border shadow" data-tor="active:shadow-offset.down(sm)">shadow-offset.down(sm)</div>
<div class="bg-transparent border shadow" data-tor="active:shadow-offset.down(md)">shadow-offset.down(md)</div>
<div class="bg-transparent border shadow" data-tor="active:shadow-offset.down(lg)">shadow-offset.down(lg)</div>
<div class="bg-transparent border shadow" data-tor="active:shadow-offset.down(xl)">shadow-offset.down(xl)</div>
<div class="bg-transparent border shadow" data-tor="active:shadow-offset.down(1.5rem)">shadow-offset.down(1.5rem)</div>
shadow-offset.down(xs)
shadow-offset.down(sm)
shadow-offset.down(md)
shadow-offset.down(lg)
shadow-offset.down(xl)
shadow-offset.down(1.5rem)
<div class="bg-transparent border shadow" data-tor="inview:shadow-offset.down(xs)">shadow-offset.down(xs)</div>
<div class="bg-transparent border shadow" data-tor="inview:shadow-offset.down(sm)">shadow-offset.down(sm)</div>
<div class="bg-transparent border shadow" data-tor="inview:shadow-offset.down(md)">shadow-offset.down(md)</div>
<div class="bg-transparent border shadow" data-tor="inview:shadow-offset.down(lg)">shadow-offset.down(lg)</div>
<div class="bg-transparent border shadow" data-tor="inview:shadow-offset.down(xl)">shadow-offset.down(xl)</div>
<div class="bg-transparent border shadow" data-tor="inview:shadow-offset.down(1.5rem)">shadow-offset.down(1.5rem)</div>
Parent triggers
shadow-offset.down(xs)
shadow-offset.down(sm)
shadow-offset.down(md)
shadow-offset.down(lg)
shadow-offset.down(xl)
shadow-offset.down(1.5rem)
<div class="bg-white shadow" data-tor="hover(p):shadow-offset.down(xs)">shadow-offset.down(xs)</div>
<div class="bg-white shadow" data-tor="hover(p):shadow-offset.down(sm)">shadow-offset.down(sm)</div>
<div class="bg-white shadow" data-tor="hover(p):shadow-offset.down(md)">shadow-offset.down(md)</div>
<div class="bg-white shadow" data-tor="hover(p):shadow-offset.down(lg)">shadow-offset.down(lg)</div>
<div class="bg-white shadow" data-tor="hover(p):shadow-offset.down(xl)">shadow-offset.down(xl)</div>
<div class="bg-white shadow" data-tor="hover(p):shadow-offset.down(1.5rem)">shadow-offset.down(1.5rem)</div>
shadow-offset.down(xs)
shadow-offset.down(sm)
shadow-offset.down(md)
shadow-offset.down(lg)
shadow-offset.down(xl)
shadow-offset.down(1.5rem)
<div class="bg-white shadow" data-tor="active(p):shadow-offset.down(xs)">shadow-offset.down(xs)</div>
<div class="bg-white shadow" data-tor="active(p):shadow-offset.down(sm)">shadow-offset.down(sm)</div>
<div class="bg-white shadow" data-tor="active(p):shadow-offset.down(md)">shadow-offset.down(md)</div>
<div class="bg-white shadow" data-tor="active(p):shadow-offset.down(lg)">shadow-offset.down(lg)</div>
<div class="bg-white shadow" data-tor="active(p):shadow-offset.down(xl)">shadow-offset.down(xl)</div>
<div class="bg-white shadow" data-tor="active(p):shadow-offset.down(1.5rem)">shadow-offset.down(1.5rem)</div>
shadow-offset.down(xs)
shadow-offset.down(sm)
shadow-offset.down(md)
shadow-offset.down(lg)
shadow-offset.down(xl)
shadow-offset.down(1.5rem)
<div class="bg-white shadow" data-tor="inview(p):shadow-offset.down(xs)">shadow-offset.down(xs)</div>
<div class="bg-white shadow" data-tor="inview(p):shadow-offset.down(sm)">shadow-offset.down(sm)</div>
<div class="bg-white shadow" data-tor="inview(p):shadow-offset.down(md)">shadow-offset.down(md)</div>
<div class="bg-white shadow" data-tor="inview(p):shadow-offset.down(lg)">shadow-offset.down(lg)</div>
<div class="bg-white shadow" data-tor="inview(p):shadow-offset.down(xl)">shadow-offset.down(xl)</div>
<div class="bg-white shadow" data-tor="inview(p):shadow-offset.down(1.5rem)">shadow-offset.down(1.5rem)</div>

Combinations

Sticky shadow
Risen shadow
Colored shadow
<div class="shadow" data-tor="hover:[push.up(sm) shadow-offset.down(sm)]">Sticky shadow</div>
<div class="shadow" data-tor="hover:[push.up(sm) shadow(risen)]">Risen shadow</div>
<div class="shadow-lg shadow-primary" data-tor="hover:shadow-intensity(lg)">Colored shadow</div>