Enhanced Bootstrap Shadows

Built in Shadows PRO

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-fx="hover:shadow--risen hover:push--up hover:bg-color--light">
  <h2 class="svg-shadow-sm" data-fx="hover:svg-shadow--lg hover:shadow-intensity--strong">Hover this text</h2>
  <div class="btn btn-primary shadow-lg shadow-primary shadow-strong" data-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-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

Hover over the elements:

Shadow xs
Shadow sm
Shadow md
Shadow lg
Shadow xl
Shadow pop
Shadow risen
          













<div data-fx="hover:shadow--xs">Shadow xs</div>
<div data-fx="hover:shadow--sm">Shadow sm</div>
<div data-fx="hover:shadow--md">Shadow md</div>
<div data-fx="hover:shadow--lg">Shadow lg</div>
<div data-fx="hover:shadow--xl">Shadow xl</div>
<div data-fx="hover:shadow--pop">Shadow pop</div>
<div data-fx="hover:shadow--risen">Shadow risen</div>

Click the elements to toggle .active class

Shadow xs
Shadow sm
Shadow md
Shadow lg
Shadow xl
Shadow pop
Shadow risen
          













<div data-fx="active:shadow--xs">Shadow xs</div>
<div data-fx="active:shadow--sm">Shadow sm</div>
<div data-fx="active:shadow--md">Shadow md</div>
<div data-fx="active:shadow--lg">Shadow lg</div>
<div data-fx="active:shadow--xl">Shadow xl</div>
<div data-fx="active:shadow--pop">Shadow pop</div>
<div data-fx="active:shadow--risen">Shadow risen</div>

Scroll into view to toggle .inview class

Shadow xs
Shadow sm
Shadow md
Shadow lg
Shadow xl
Shadow pop
Shadow risen
          













<div data-fx="inview:shadow--xs">Shadow xs</div>
<div data-fx="inview:shadow--sm">Shadow sm</div>
<div data-fx="inview:shadow--md">Shadow md</div>
<div data-fx="inview:shadow--lg">Shadow lg</div>
<div data-fx="inview:shadow--xl">Shadow xl</div>
<div data-fx="inview:shadow--pop">Shadow pop</div>
<div data-fx="inview:shadow--risen">Shadow risen</div>

Parent triggers

To add a shadow animation of a single or multiple child elements when {trigger} is performed on a parent element,
add data-fx-trigger="{inview|active|show|hover} to indicate that this is a parent element with the desired trigger - if this parent trigger is performed,
child elements will change.

Than add data-fx="{TRIGGER}:{shadow-variant} attribute to child elements where {TRIGGER} is:

  • inview/T: - when .inview class is applied on parent Trigger element, because it’s visible in the viewport
  • active/T: - when .active class is applied on parent Trigger element
  • show/T: - when .show class is applied on parent Trigger element
  • hover/T: - when hover state is applied on parent Trigger element

Hover over the wrapper:

Shadow xs
Shadow sm
Shadow md
Shadow lg
Shadow xl
Shadow pop
Shadow risen
          













<div data-fx-trigger="hover">
  <div data-fx="hover/T:shadow--xs">Shadow xs</div>
  <div data-fx="hover/T:shadow--sm">Shadow sm</div>
  <div data-fx="hover/T:shadow--md">Shadow md</div>
  <div data-fx="hover/T:shadow--lg">Shadow lg</div>
  <div data-fx="hover/T:shadow--xl">Shadow xl</div>
  <div data-fx="hover/T:shadow--pop">Shadow pop</div>
  <div data-fx="hover/T:shadow--risen">Shadow risen</div>
</div>

Click the wrapper to toggle .active class:

Shadow xs
Shadow sm
Shadow md
Shadow lg
Shadow xl
Shadow pop
Shadow risen
          













<div data-fx-trigger="active">
  <div data-fx="active/T:shadow--xs">Shadow xs</div>
  <div data-fx="active/T:shadow--sm">Shadow sm</div>
  <div data-fx="active/T:shadow--md">Shadow md</div>
  <div data-fx="active/T:shadow--lg">Shadow lg</div>
  <div data-fx="active/T:shadow--xl">Shadow xl</div>
  <div data-fx="active/T:shadow--pop">Shadow pop</div>
  <div data-fx="active/T:shadow--risen">Shadow risen</div>
</div>

Scroll into view to toggle .inview class on parent

Shadow xs
Shadow sm
Shadow md
Shadow lg
Shadow xl
Shadow pop
Shadow risen
          













<div data-fx-trigger="inview">
  <div data-fx="inview/T:shadow--xs">Shadow xs</div>
  <div data-fx="inview/T:shadow--sm">Shadow sm</div>
  <div data-fx="inview/T:shadow--md">Shadow md</div>
  <div data-fx="inview/T:shadow--lg">Shadow lg</div>
  <div data-fx="inview/T:shadow--xl">Shadow xl</div>
  <div data-fx="inview/T:shadow--pop">Shadow pop</div>
  <div data-fx="inview/T:shadow--risen">Shadow risen</div>
</div>

Modifications

Shadow intensity

Triggers

Hover over the elements:

Shadow intensity light
Shadow intensity strong
          













<div class="shadow" data-fx="hover:shadow-intensity--light">Shadow intensity light</div>
<div class="shadow" data-fx="hover:shadow-intensity--strong">Shadow intensity strong</div>

Click the elements to toggle .active class

Shadow intensity light
Shadow intensity strong
          













<div class="shadow" data-fx="active:shadow-intensity--light">Shadow intensity light</div>
<div class="shadow" data-fx="active:shadow-intensity--strong">Shadow intensity strong</div>

Scroll into view to toggle .inview class

Shadow intensity light
Shadow intensity strong
          













<div class="shadow" data-fx="inview:shadow-intensity--light">Shadow intensity light</div>
<div class="shadow" data-fx="inview:shadow-intensity--strong">Shadow intensity strong</div>
Parent triggers

Hover over the wrapper:

Shadow intensity light
Shadow intensity strong
          













<div data-fx-trigger="hover">
  <div class="shadow" data-fx="hover/T:shadow-intensity--light">Shadow intensity light</div>
  <div class="shadow" data-fx="hover/T:shadow-intensity--strong">Shadow intensity strong</div>
</div>

Click the wrapper to toggle .active class:

Shadow intensity light
Shadow intensity strong
          













<div data-fx-trigger="active">
  <div class="shadow" data-fx="active/T:shadow-intensity--light">Shadow intensity light</div>
  <div class="shadow" data-fx="active/T:shadow-intensity--strong">Shadow intensity strong</div>
</div>

Scroll into view to toggle .inview class on parent

Shadow intensity light
Shadow intensity strong
          













<div data-fx-trigger="inview">
  <div class="shadow" data-fx="inview/T:shadow-intensity--light">Shadow intensity light</div>
  <div class="shadow" data-fx="inview/T:shadow-intensity--strong">Shadow intensity strong</div>
</div>

Shadow color

Triggers

Hover over the elements:

Shadow color primary
Shadow color secondary
Shadow color danger
Shadow color purple
Shadow color info
          













<div class="shadow shadow-strong" data-fx="hover:shadow-color--primary">Shadow color primary</div>
<div class="shadow shadow-strong" data-fx="hover:shadow-color--secondary">Shadow color secondary</div>
<div class="shadow shadow-strong" data-fx="hover:shadow-color--danger">Shadow color danger</div>
<div class="shadow shadow-strong" data-fx="hover:shadow-color--purple">Shadow color purple</div>
<div class="shadow shadow-strong" data-fx="hover:shadow-color--info">Shadow color info</div>

Click the elements to toggle .active class

Shadow color primary
Shadow color secondary
Shadow color danger
Shadow color purple
Shadow color info
          













<div class="shadow shadow-strong" data-fx="active:shadow-color--primary">Shadow color primary</div>
<div class="shadow shadow-strong" data-fx="active:shadow-color--secondary">Shadow color secondary</div>
<div class="shadow shadow-strong" data-fx="active:shadow-color--danger">Shadow color danger</div>
<div class="shadow shadow-strong" data-fx="active:shadow-color--purple">Shadow color purple</div>
<div class="shadow shadow-strong" data-fx="active:shadow-color--info">Shadow color info</div>

Scroll into view to toggle .inview class

Shadow color primary
Shadow color secondary
Shadow color danger
Shadow color purple
Shadow color info
          













<div class="shadow shadow-strong" data-fx="inview:shadow-color--primary">Shadow color primary</div>
<div class="shadow shadow-strong" data-fx="inview:shadow-color--secondary">Shadow color secondary</div>
<div class="shadow shadow-strong" data-fx="inview:shadow-color--danger">Shadow color danger</div>
<div class="shadow shadow-strong" data-fx="inview:shadow-color--purple">Shadow color purple</div>
<div class="shadow shadow-strong" data-fx="inview:shadow-color--info">Shadow color info</div>
Parent triggers

Hover over the wrapper:

Shadow color primary
Shadow color secondary
Shadow color danger
Shadow color purple
Shadow color info
          













<div data-fx-trigger="hover">
  <div class="shadow shadow-strong" data-fx="hover/T:shadow-color--primary">Shadow color primary</div>
  <div class="shadow shadow-strong" data-fx="hover/T:shadow-color--secondary">Shadow color secondary</div>
  <div class="shadow shadow-strong" data-fx="hover/T:shadow-color--danger">Shadow color danger</div>
  <div class="shadow shadow-strong" data-fx="hover/T:shadow-color--purple">Shadow color purple</div>
  <div class="shadow shadow-strong" data-fx="hover/T:shadow-color--info">Shadow color info</div>
</div>

Click the wrapper to toggle .active class:

Shadow color primary
Shadow color secondary
Shadow color danger
Shadow color purple
Shadow color info
          













<div data-fx-trigger="active">
  <div class="shadow shadow-strong" data-fx="active/T:shadow-color--primary">Shadow color primary</div>
  <div class="shadow shadow-strong" data-fx="active/T:shadow-color--secondary">Shadow color secondary</div>
  <div class="shadow shadow-strong" data-fx="active/T:shadow-color--danger">Shadow color danger</div>
  <div class="shadow shadow-strong" data-fx="active/T:shadow-color--purple">Shadow color purple</div>
  <div class="shadow shadow-strong" data-fx="active/T:shadow-color--info">Shadow color info</div>
</div>

Scroll into view to toggle .inview class on parent

Shadow color primary
Shadow color secondary
Shadow color danger
Shadow color purple
Shadow color info
          













<div data-fx-trigger="inview">
  <div class="shadow shadow-strong" data-fx="inview/T:shadow-color--primary">Shadow color primary</div>
  <div class="shadow shadow-strong" data-fx="inview/T:shadow-color--secondary">Shadow color secondary</div>
  <div class="shadow shadow-strong" data-fx="inview/T:shadow-color--danger">Shadow color danger</div>
  <div class="shadow shadow-strong" data-fx="inview/T:shadow-color--purple">Shadow color purple</div>
  <div class="shadow shadow-strong" data-fx="inview/T:shadow-color--info">Shadow color info</div>
</div>