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="shadow" data-tor-fx="hover:{shadow(risen) push.up(xs)}">
<h2 class="svg-shadow-sm" data-tor-fx="hover:{svg-shadow(lg) shadow-intensity(xl)}">Hover this text</h2>
<div class="btn btn-primary shadow-lg shadow-primary shadow-strong" data-tor-fx="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
classactive:
- when element gets.active
classshow:
- when element gets.show
classhover:
- 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-fx="hover:shadow(xs)">shadow(xs)</div>
<div class="bg-transparent border" data-tor-fx="hover:shadow(sm)">shadow(sm)</div>
<div class="bg-transparent border" data-tor-fx="hover:shadow(md)">shadow(md)</div>
<div class="bg-transparent border" data-tor-fx="hover:shadow(lg)">shadow(lg)</div>
<div class="bg-transparent border" data-tor-fx="hover:shadow(xl)">shadow(xl)</div>
<div class="bg-transparent border" data-tor-fx="hover:shadow(pop)">shadow(pop)</div>
<div class="bg-transparent border" data-tor-fx="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-fx="active:shadow(xs)">shadow(xs)</div>
<div class="bg-transparent border" data-tor-fx="active:shadow(sm)">shadow(sm)</div>
<div class="bg-transparent border" data-tor-fx="active:shadow(md)">shadow(md)</div>
<div class="bg-transparent border" data-tor-fx="active:shadow(lg)">shadow(lg)</div>
<div class="bg-transparent border" data-tor-fx="active:shadow(xl)">shadow(xl)</div>
<div class="bg-transparent border" data-tor-fx="active:shadow(pop)">shadow(pop)</div>
<div class="bg-transparent border" data-tor-fx="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-fx="inview:shadow(xs)">shadow(xs)</div>
<div class="bg-transparent border" data-tor-fx="inview:shadow(sm)">shadow(sm)</div>
<div class="bg-transparent border" data-tor-fx="inview:shadow(md)">shadow(md)</div>
<div class="bg-transparent border" data-tor-fx="inview:shadow(lg)">shadow(lg)</div>
<div class="bg-transparent border" data-tor-fx="inview:shadow(xl)">shadow(xl)</div>
<div class="bg-transparent border" data-tor-fx="inview:shadow(pop)">shadow(pop)</div>
<div class="bg-transparent border" data-tor-fx="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
classactive:
- when element gets.active
classshow:
- when element gets.show
classhover:
- 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-fx="hover-T:shadow(xs)">shadow(xs)</div>
<div class="bg-white" data-tor-fx="hover-T:shadow(sm)">shadow(sm)</div>
<div class="bg-white" data-tor-fx="hover-T:shadow(md)">shadow(md)</div>
<div class="bg-white" data-tor-fx="hover-T:shadow(lg)">shadow(lg)</div>
<div class="bg-white" data-tor-fx="hover-T:shadow(xl)">shadow(xl)</div>
<div class="bg-white" data-tor-fx="hover-T:shadow(pop)">shadow(pop)</div>
<div class="bg-white" data-tor-fx="hover-T: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-fx="active-T:shadow(xs)">shadow(xs)</div>
<div class="bg-white" data-tor-fx="active-T:shadow(sm)">shadow(sm)</div>
<div class="bg-white" data-tor-fx="active-T:shadow(md)">shadow(md)</div>
<div class="bg-white" data-tor-fx="active-T:shadow(lg)">shadow(lg)</div>
<div class="bg-white" data-tor-fx="active-T:shadow(xl)">shadow(xl)</div>
<div class="bg-white" data-tor-fx="active-T:shadow(pop)">shadow(pop)</div>
<div class="bg-white" data-tor-fx="active-T: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-fx="inview-T:shadow(xs)">shadow(xs)</div>
<div class="bg-white" data-tor-fx="inview-T:shadow(sm)">shadow(sm)</div>
<div class="bg-white" data-tor-fx="inview-T:shadow(md)">shadow(md)</div>
<div class="bg-white" data-tor-fx="inview-T:shadow(lg)">shadow(lg)</div>
<div class="bg-white" data-tor-fx="inview-T:shadow(xl)">shadow(xl)</div>
<div class="bg-white" data-tor-fx="inview-T:shadow(pop)">shadow(pop)</div>
<div class="bg-white" data-tor-fx="inview-T:shadow(risen)">shadow(risen)</div>
Modifications
Shadow intensity
Triggers
shadow-intensity(xs)
shadow-intensity(sm)
shadow-intensity(md)
shadow-intensity(lg)
shadow-intensity(xl)
<div class="bg-transparent border shadow" data-tor-fx="hover:shadow-intensity(xs)">shadow-intensity(xs)</div>
<div class="bg-transparent border shadow" data-tor-fx="hover:shadow-intensity(sm)">shadow-intensity(sm)</div>
<div class="bg-transparent border shadow" data-tor-fx="hover:shadow-intensity(md)">shadow-intensity(md)</div>
<div class="bg-transparent border shadow" data-tor-fx="hover:shadow-intensity(lg)">shadow-intensity(lg)</div>
<div class="bg-transparent border shadow" data-tor-fx="hover:shadow-intensity(xl)">shadow-intensity(xl)</div>
shadow-intensity(xs)
shadow-intensity(sm)
shadow-intensity(md)
shadow-intensity(lg)
shadow-intensity(xl)
<div class="bg-transparent border shadow" data-tor-fx="active:shadow-intensity(xs)">shadow-intensity(xs)</div>
<div class="bg-transparent border shadow" data-tor-fx="active:shadow-intensity(sm)">shadow-intensity(sm)</div>
<div class="bg-transparent border shadow" data-tor-fx="active:shadow-intensity(md)">shadow-intensity(md)</div>
<div class="bg-transparent border shadow" data-tor-fx="active:shadow-intensity(lg)">shadow-intensity(lg)</div>
<div class="bg-transparent border shadow" data-tor-fx="active:shadow-intensity(xl)">shadow-intensity(xl)</div>
shadow-intensity(xs)
shadow-intensity(sm)
shadow-intensity(md)
shadow-intensity(lg)
shadow-intensity(xl)
<div class="bg-transparent border shadow" data-tor-fx="inview:shadow-intensity(xs)">shadow-intensity(xs)</div>
<div class="bg-transparent border shadow" data-tor-fx="inview:shadow-intensity(sm)">shadow-intensity(sm)</div>
<div class="bg-transparent border shadow" data-tor-fx="inview:shadow-intensity(md)">shadow-intensity(md)</div>
<div class="bg-transparent border shadow" data-tor-fx="inview:shadow-intensity(lg)">shadow-intensity(lg)</div>
<div class="bg-transparent border shadow" data-tor-fx="inview:shadow-intensity(xl)">shadow-intensity(xl)</div>
Parent triggers
shadow-intensity(xs)
shadow-intensity(sm)
shadow-intensity(md)
shadow-intensity(lg)
shadow-intensity(xl)
<div class="bg-white shadow" data-tor-fx="hover-T:shadow-intensity(xs)">shadow-intensity(xs)</div>
<div class="bg-white shadow" data-tor-fx="hover-T:shadow-intensity(sm)">shadow-intensity(sm)</div>
<div class="bg-white shadow" data-tor-fx="hover-T:shadow-intensity(md)">shadow-intensity(md)</div>
<div class="bg-white shadow" data-tor-fx="hover-T:shadow-intensity(lg)">shadow-intensity(lg)</div>
<div class="bg-white shadow" data-tor-fx="hover-T:shadow-intensity(xl)">shadow-intensity(xl)</div>
shadow-intensity(xs)
shadow-intensity(sm)
shadow-intensity(md)
shadow-intensity(lg)
shadow-intensity(xl)
<div class="bg-white shadow" data-tor-fx="active-T:shadow-intensity(xs)">shadow-intensity(xs)</div>
<div class="bg-white shadow" data-tor-fx="active-T:shadow-intensity(sm)">shadow-intensity(sm)</div>
<div class="bg-white shadow" data-tor-fx="active-T:shadow-intensity(md)">shadow-intensity(md)</div>
<div class="bg-white shadow" data-tor-fx="active-T:shadow-intensity(lg)">shadow-intensity(lg)</div>
<div class="bg-white shadow" data-tor-fx="active-T:shadow-intensity(xl)">shadow-intensity(xl)</div>
shadow-intensity(xs)
shadow-intensity(sm)
shadow-intensity(md)
shadow-intensity(lg)
shadow-intensity(xl)
<div class="bg-white shadow" data-tor-fx="inview-T:shadow-intensity(xs)">shadow-intensity(xs)</div>
<div class="bg-white shadow" data-tor-fx="inview-T:shadow-intensity(sm)">shadow-intensity(sm)</div>
<div class="bg-white shadow" data-tor-fx="inview-T:shadow-intensity(md)">shadow-intensity(md)</div>
<div class="bg-white shadow" data-tor-fx="inview-T:shadow-intensity(lg)">shadow-intensity(lg)</div>
<div class="bg-white shadow" data-tor-fx="inview-T:shadow-intensity(xl)">shadow-intensity(xl)</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-fx="hover:shadow-color(primary)">shadow-color(primary)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="hover:shadow-color(secondary)">shadow-color(secondary)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="hover:shadow-color(success)">shadow-color(success)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="hover:shadow-color(danger)">shadow-color(danger)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="hover:shadow-color(warning)">shadow-color(warning)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="hover:shadow-color(info)">shadow-color(info)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="hover:shadow-color(light)">shadow-color(light)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="hover:shadow-color(dark)">shadow-color(dark)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="hover:shadow-color(white)">shadow-color(white)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="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-fx="active:shadow-color(primary)">shadow-color(primary)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="active:shadow-color(secondary)">shadow-color(secondary)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="active:shadow-color(success)">shadow-color(success)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="active:shadow-color(danger)">shadow-color(danger)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="active:shadow-color(warning)">shadow-color(warning)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="active:shadow-color(info)">shadow-color(info)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="active:shadow-color(light)">shadow-color(light)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="active:shadow-color(dark)">shadow-color(dark)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="active:shadow-color(white)">shadow-color(white)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="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-fx="inview:shadow-color(primary)">shadow-color(primary)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="inview:shadow-color(secondary)">shadow-color(secondary)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="inview:shadow-color(success)">shadow-color(success)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="inview:shadow-color(danger)">shadow-color(danger)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="inview:shadow-color(warning)">shadow-color(warning)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="inview:shadow-color(info)">shadow-color(info)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="inview:shadow-color(light)">shadow-color(light)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="inview:shadow-color(dark)">shadow-color(dark)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="inview:shadow-color(white)">shadow-color(white)</div>
<div class="bg-transparent border shadow-lg" data-tor-fx="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-fx="hover-T:shadow-color(primary)">shadow-color(primary)</div>
<div class="bg-white shadow-lg" data-tor-fx="hover-T:shadow-color(secondary)">shadow-color(secondary)</div>
<div class="bg-white shadow-lg" data-tor-fx="hover-T:shadow-color(success)">shadow-color(success)</div>
<div class="bg-white shadow-lg" data-tor-fx="hover-T:shadow-color(danger)">shadow-color(danger)</div>
<div class="bg-white shadow-lg" data-tor-fx="hover-T:shadow-color(warning)">shadow-color(warning)</div>
<div class="bg-white shadow-lg" data-tor-fx="hover-T:shadow-color(info)">shadow-color(info)</div>
<div class="bg-white shadow-lg" data-tor-fx="hover-T:shadow-color(light)">shadow-color(light)</div>
<div class="bg-white shadow-lg" data-tor-fx="hover-T:shadow-color(dark)">shadow-color(dark)</div>
<div class="bg-white shadow-lg" data-tor-fx="hover-T:shadow-color(white)">shadow-color(white)</div>
<div class="bg-white shadow-lg" data-tor-fx="hover-T: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-fx="active-T:shadow-color(primary)">shadow-color(primary)</div>
<div class="bg-white shadow-lg" data-tor-fx="active-T:shadow-color(secondary)">shadow-color(secondary)</div>
<div class="bg-white shadow-lg" data-tor-fx="active-T:shadow-color(success)">shadow-color(success)</div>
<div class="bg-white shadow-lg" data-tor-fx="active-T:shadow-color(danger)">shadow-color(danger)</div>
<div class="bg-white shadow-lg" data-tor-fx="active-T:shadow-color(warning)">shadow-color(warning)</div>
<div class="bg-white shadow-lg" data-tor-fx="active-T:shadow-color(info)">shadow-color(info)</div>
<div class="bg-white shadow-lg" data-tor-fx="active-T:shadow-color(light)">shadow-color(light)</div>
<div class="bg-white shadow-lg" data-tor-fx="active-T:shadow-color(dark)">shadow-color(dark)</div>
<div class="bg-white shadow-lg" data-tor-fx="active-T:shadow-color(white)">shadow-color(white)</div>
<div class="bg-white shadow-lg" data-tor-fx="active-T: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-fx="inview-T:shadow-color(primary)">shadow-color(primary)</div>
<div class="bg-white shadow-lg" data-tor-fx="inview-T:shadow-color(secondary)">shadow-color(secondary)</div>
<div class="bg-white shadow-lg" data-tor-fx="inview-T:shadow-color(success)">shadow-color(success)</div>
<div class="bg-white shadow-lg" data-tor-fx="inview-T:shadow-color(danger)">shadow-color(danger)</div>
<div class="bg-white shadow-lg" data-tor-fx="inview-T:shadow-color(warning)">shadow-color(warning)</div>
<div class="bg-white shadow-lg" data-tor-fx="inview-T:shadow-color(info)">shadow-color(info)</div>
<div class="bg-white shadow-lg" data-tor-fx="inview-T:shadow-color(light)">shadow-color(light)</div>
<div class="bg-white shadow-lg" data-tor-fx="inview-T:shadow-color(dark)">shadow-color(dark)</div>
<div class="bg-white shadow-lg" data-tor-fx="inview-T:shadow-color(white)">shadow-color(white)</div>
<div class="bg-white shadow-lg" data-tor-fx="inview-T:shadow-color(transparent)">shadow-color(transparent)</div>
Shadow offset
Triggers
shadow-offset.down(xs)
shadow-offset.down(sm)
shadow-offset.down(md)
shadow-offset.down(lg)
shadow-offset.down(xl)
<div class="bg-transparent border shadow" data-tor-fx="hover:shadow-offset.down(xs)">shadow-offset.down(xs)</div>
<div class="bg-transparent border shadow" data-tor-fx="hover:shadow-offset.down(sm)">shadow-offset.down(sm)</div>
<div class="bg-transparent border shadow" data-tor-fx="hover:shadow-offset.down(md)">shadow-offset.down(md)</div>
<div class="bg-transparent border shadow" data-tor-fx="hover:shadow-offset.down(lg)">shadow-offset.down(lg)</div>
<div class="bg-transparent border shadow" data-tor-fx="hover:shadow-offset.down(xl)">shadow-offset.down(xl)</div>
shadow-offset.down(xs)
shadow-offset.down(sm)
shadow-offset.down(md)
shadow-offset.down(lg)
shadow-offset.down(xl)
<div class="bg-transparent border shadow" data-tor-fx="active:shadow-offset.down(xs)">shadow-offset.down(xs)</div>
<div class="bg-transparent border shadow" data-tor-fx="active:shadow-offset.down(sm)">shadow-offset.down(sm)</div>
<div class="bg-transparent border shadow" data-tor-fx="active:shadow-offset.down(md)">shadow-offset.down(md)</div>
<div class="bg-transparent border shadow" data-tor-fx="active:shadow-offset.down(lg)">shadow-offset.down(lg)</div>
<div class="bg-transparent border shadow" data-tor-fx="active:shadow-offset.down(xl)">shadow-offset.down(xl)</div>
shadow-offset.down(xs)
shadow-offset.down(sm)
shadow-offset.down(md)
shadow-offset.down(lg)
shadow-offset.down(xl)
<div class="bg-transparent border shadow" data-tor-fx="inview:shadow-offset.down(xs)">shadow-offset.down(xs)</div>
<div class="bg-transparent border shadow" data-tor-fx="inview:shadow-offset.down(sm)">shadow-offset.down(sm)</div>
<div class="bg-transparent border shadow" data-tor-fx="inview:shadow-offset.down(md)">shadow-offset.down(md)</div>
<div class="bg-transparent border shadow" data-tor-fx="inview:shadow-offset.down(lg)">shadow-offset.down(lg)</div>
<div class="bg-transparent border shadow" data-tor-fx="inview:shadow-offset.down(xl)">shadow-offset.down(xl)</div>
Parent triggers
shadow-offset.down(xs)
shadow-offset.down(sm)
shadow-offset.down(md)
shadow-offset.down(lg)
shadow-offset.down(xl)
<div class="bg-white shadow" data-tor-fx="hover-T:shadow-offset.down(xs)">shadow-offset.down(xs)</div>
<div class="bg-white shadow" data-tor-fx="hover-T:shadow-offset.down(sm)">shadow-offset.down(sm)</div>
<div class="bg-white shadow" data-tor-fx="hover-T:shadow-offset.down(md)">shadow-offset.down(md)</div>
<div class="bg-white shadow" data-tor-fx="hover-T:shadow-offset.down(lg)">shadow-offset.down(lg)</div>
<div class="bg-white shadow" data-tor-fx="hover-T:shadow-offset.down(xl)">shadow-offset.down(xl)</div>
shadow-offset.down(xs)
shadow-offset.down(sm)
shadow-offset.down(md)
shadow-offset.down(lg)
shadow-offset.down(xl)
<div class="bg-white shadow" data-tor-fx="active-T:shadow-offset.down(xs)">shadow-offset.down(xs)</div>
<div class="bg-white shadow" data-tor-fx="active-T:shadow-offset.down(sm)">shadow-offset.down(sm)</div>
<div class="bg-white shadow" data-tor-fx="active-T:shadow-offset.down(md)">shadow-offset.down(md)</div>
<div class="bg-white shadow" data-tor-fx="active-T:shadow-offset.down(lg)">shadow-offset.down(lg)</div>
<div class="bg-white shadow" data-tor-fx="active-T:shadow-offset.down(xl)">shadow-offset.down(xl)</div>
shadow-offset.down(xs)
shadow-offset.down(sm)
shadow-offset.down(md)
shadow-offset.down(lg)
shadow-offset.down(xl)
<div class="bg-white shadow" data-tor-fx="inview-T:shadow-offset.down(xs)">shadow-offset.down(xs)</div>
<div class="bg-white shadow" data-tor-fx="inview-T:shadow-offset.down(sm)">shadow-offset.down(sm)</div>
<div class="bg-white shadow" data-tor-fx="inview-T:shadow-offset.down(md)">shadow-offset.down(md)</div>
<div class="bg-white shadow" data-tor-fx="inview-T:shadow-offset.down(lg)">shadow-offset.down(lg)</div>
<div class="bg-white shadow" data-tor-fx="inview-T:shadow-offset.down(xl)">shadow-offset.down(xl)</div>
Combinations
Sticky shadow
Risen shadow
Colored shadow
<div class="shadow" data-tor-fx="hover:{push.up(sm) shadow-offset.down(sm)}">Sticky shadow</div>
<div class="shadow" data-tor-fx="hover:{push.up(sm) shadow(risen)}">Risen shadow</div>
<div class="shadow-lg shadow-primary" data-tor-fx="hover:shadow-intensity(lg)">Colored shadow</div>