Effects

Shadow

.shadow-xs 
{ box-shadow: 0 1px 0 1px rgba(0, 0, 0, var(--shadow-opacity)) }
.shadow-sm 
{ box-shadow: 0 1px 2px rgba(0, 0, 0, var(--shadow-opacity)) }
.shadow 
{ box-shadow: 0 1px 3px rgba(0, 0, 0, var(--shadow-opacity)) }
.shadow-md 
{ box-shadow: 0 2px 6px rgba(0, 0, 0, var(--shadow-opacity)) }
.shadow-lg 
{ box-shadow: 0 2px 12px rgba(0, 0, 0, var(--shadow-opacity)) }
.shadow-outline 
{ box-shadow: 0 0 0 1px rgba(0, 0, 0, var(--shadow-opacity)) }
.shadow-inset 
{ box-shadow: inset 0 2px 4px rgba(0, 0, 0, var(--shadow-opacity)) }
.shadow-inline 
{ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, var(--shadow-opacity)) }

Opacity

.shadow-opacity-0 
{ --shadow-opacity: 0 }
.shadow-opacity-10 
{ --shadow-opacity: 0.1 }
.shadow-opacity-20 
{ --shadow-opacity: 0.2 }
.shadow-opacity-30 
{ --shadow-opacity: 0.3 }
.shadow-opacity-40 
{ --shadow-opacity: 0.4 }
.shadow-opacity-50 
{ --shadow-opacity: 0.5 }
.shadow-opacity-60 
{ --shadow-opacity: 0.6 }
.shadow-opacity-70 
{ --shadow-opacity: 0.7 }
.shadow-opacity-80 
{ --shadow-opacity: 0.8 }
.shadow-opacity-90 
{ --shadow-opacity: 0.9 }
.shadow-opacity-100 
{ --shadow-opacity: 1 }

Transition

Pre-built

Toggle class -out to trigger transition.

button.addEventListener('click', e => button.classList.toggle('-out))
.transition-fade-down 
{ transition: transform 100ms, opacity 100ms;
 opacity: 1 }
.transition-fade-up 
{ transition: transform 100ms, opacity 100ms;
 opacity: 1 }
.transition-fade-left 
{ transition: transform 100ms, opacity 100ms;
 opacity: 1 }
.transition-fade-right 
{ transition: transform 100ms, opacity 100ms;
 opacity: 1 }

Utilities

.transition-none 
{ transition-property: none }
.transition-all 
{ transition-property: all }
.transition-colors 
{ transition-property: "background-color, border-color, color, fill, stroke" }
.transition-opacity 
{ transition-property: opacity }
.transition-shadow 
{ transition-property: box-shadow }
.transition-transform 
{ transition-property: transform }
.transition-0 
{ transition-duration: 0ms }
.transition-100 
{ transition-duration: 100ms }
.transition-200 
{ transition-duration: 200ms }
.transition-300 
{ transition-duration: 300ms }
.transition-400 
{ transition-duration: 400ms }
.transition-500 
{ transition-duration: 500ms }
.transition-600 
{ transition-duration: 600ms }
.transition-700 
{ transition-duration: 700ms }
.transition-800 
{ transition-duration: 800ms }
.transition-900 
{ transition-duration: 900ms }
.transition-1000 
{ transition-duration: 1000ms }

Transform

Requires class .transform

.rotate-0 
{ --transform-rotate: 0deg }
.-rotate-0 
{ --transform-rotate: -0deg }
.rotate-1 
{ --transform-rotate: 1deg }
.-rotate-1 
{ --transform-rotate: -1deg }
.rotate-2 
{ --transform-rotate: 2deg }
.-rotate-2 
{ --transform-rotate: -2deg }
.rotate-3 
{ --transform-rotate: 3deg }
.-rotate-3 
{ --transform-rotate: -3deg }
.rotate-6 
{ --transform-rotate: 6deg }
.-rotate-6 
{ --transform-rotate: -6deg }
.rotate-12 
{ --transform-rotate: 12deg }
.-rotate-12 
{ --transform-rotate: -12deg }
.rotate-45 
{ --transform-rotate: 45deg }
.-rotate-45 
{ --transform-rotate: -45deg }
.rotate-90 
{ --transform-rotate: 90deg }
.-rotate-90 
{ --transform-rotate: -90deg }
.rotate-180 
{ --transform-rotate: 180deg }
.-rotate-180 
{ --transform-rotate: -180deg }

Animate

.animate-spin 
{ --animation-duration: 1s;
 animation: spin var(--animation-duration) linear infinite }
.animate-ping 
{ --animation-duration: 1s;
 animation: ping var(--animation-duration) linear infinite }
.animate-pulse 
{ --animation-duration: 1s;
 animation: pulse var(--animation-duration) linear infinite }
.animate-bounce 
{ --animation-duration: 1s;
 animation: bounce var(--animation-duration) linear infinite }
.animate-blink 
{ --animation-duration: 1s;
 animation: blink var(--animation-duration) linear infinite }

Duration

.animation-0 
{  }
.animation-100 
{  }
.animation-200 
{  }
.animation-300 
{  }
.animation-400 
{  }
.animation-500 
{  }
.animation-600 
{  }
.animation-700 
{  }
.animation-800 
{  }
.animation-900 
{  }
.animation-1000 
{  }
.animation-1100 
{  }
.animation-1200 
{  }
.animation-1300 
{  }
.animation-1400 
{  }
.animation-1500 
{  }
.animation-1600 
{  }
.animation-1700 
{  }
.animation-1800 
{  }
.animation-1900 
{  }
.animation-2000 
{  }

Miscellaneous

.shadow-xs 
{ box-shadow: 0 1px 0 1px rgba(0, 0, 0, var(--shadow-opacity)) }
.shadow-sm 
{ box-shadow: 0 1px 2px rgba(0, 0, 0, var(--shadow-opacity)) }
.shadow 
{ box-shadow: 0 1px 3px rgba(0, 0, 0, var(--shadow-opacity)) }
.shadow-md 
{ box-shadow: 0 2px 6px rgba(0, 0, 0, var(--shadow-opacity)) }
.shadow-lg 
{ box-shadow: 0 2px 12px rgba(0, 0, 0, var(--shadow-opacity)) }
.shadow-outline 
{ box-shadow: 0 0 0 1px rgba(0, 0, 0, var(--shadow-opacity)) }
.shadow-inset 
{ box-shadow: inset 0 2px 4px rgba(0, 0, 0, var(--shadow-opacity)) }
.shadow-inline 
{ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, var(--shadow-opacity)) }
.transition-none 
{ transition-property: none }
.transition-all 
{ transition-property: all }
.transition-colors 
{ transition-property: "background-color, border-color, color, fill, stroke" }
.transition-shadow 
{ transition-property: box-shadow }
.transition-transform 
{ transition-property: transform }
.transition-0 
{ transition-duration: 0ms }
.transition-100 
{ transition-duration: 100ms }
.transition-200 
{ transition-duration: 200ms }
.transition-300 
{ transition-duration: 300ms }
.transition-400 
{ transition-duration: 400ms }
.transition-500 
{ transition-duration: 500ms }
.transition-600 
{ transition-duration: 600ms }
.transition-700 
{ transition-duration: 700ms }
.transition-800 
{ transition-duration: 800ms }
.transition-900 
{ transition-duration: 900ms }
.transition-1000 
{ transition-duration: 1000ms }
.transition-fade-down 
{ transition: transform 100ms, opacity 100ms;
 opacity: 1 }
.transition-fade-up 
{ transition: transform 100ms, opacity 100ms;
 opacity: 1 }
.transition-fade-left 
{ transition: transform 100ms, opacity 100ms;
 opacity: 1 }
.transition-fade-right 
{ transition: transform 100ms, opacity 100ms;
 opacity: 1 }
.transition-fade-down.-out 
{ opacity: 0 }
.transition-fade-up.-out 
{ opacity: 0 }
.transition-fade-left.-out 
{ opacity: 0 }
.transition-fade-right.-out 
{ opacity: 0 }
.rotate-0 
{ --transform-rotate: 0deg }
.-rotate-0 
{ --transform-rotate: -0deg }
.rotate-1 
{ --transform-rotate: 1deg }
.-rotate-1 
{ --transform-rotate: -1deg }
.rotate-2 
{ --transform-rotate: 2deg }
.-rotate-2 
{ --transform-rotate: -2deg }
.rotate-3 
{ --transform-rotate: 3deg }
.-rotate-3 
{ --transform-rotate: -3deg }
.rotate-6 
{ --transform-rotate: 6deg }
.-rotate-6 
{ --transform-rotate: -6deg }
.rotate-12 
{ --transform-rotate: 12deg }
.-rotate-12 
{ --transform-rotate: -12deg }
.rotate-45 
{ --transform-rotate: 45deg }
.-rotate-45 
{ --transform-rotate: -45deg }
.rotate-90 
{ --transform-rotate: 90deg }
.-rotate-90 
{ --transform-rotate: -90deg }
.rotate-180 
{ --transform-rotate: 180deg }
.-rotate-180 
{ --transform-rotate: -180deg }
.animate-spin 
{ --animation-duration: 1s;
 animation: spin var(--animation-duration) linear infinite }
.animate-ping 
{ --animation-duration: 1s;
 animation: ping var(--animation-duration) linear infinite }
.animate-pulse 
{ --animation-duration: 1s;
 animation: pulse var(--animation-duration) linear infinite }
.animate-bounce 
{ --animation-duration: 1s;
 animation: bounce var(--animation-duration) linear infinite }
.animate-blink 
{ --animation-duration: 1s;
 animation: blink var(--animation-duration) linear infinite }
.animation-0 
{  }
.animation-100 
{  }
.animation-200 
{  }
.animation-300 
{  }
.animation-400 
{  }
.animation-500 
{  }
.animation-600 
{  }
.animation-700 
{  }
.animation-800 
{  }
.animation-900 
{  }
.animation-1000 
{  }
.animation-1100 
{  }
.animation-1200 
{  }
.animation-1300 
{  }
.animation-1400 
{  }
.animation-1500 
{  }
.animation-1600 
{  }
.animation-1700 
{  }
.animation-1800 
{  }
.animation-1900 
{  }
.animation-2000 
{  }
@keyframes 
{  }