Utilities: Effects & Transitions

Shadows

none

sm

md

lg

xl

<div class="lp-d-flex lp-gap-4 lp-flex-wrap lp-p-4">
    <div class="lp-demo-box lp-demo-box--lg lp-shadow-none">none</div>
    <div class="lp-demo-box lp-demo-box--lg lp-shadow-sm">sm</div>
    <div class="lp-demo-box lp-demo-box--lg lp-shadow">md</div>
    <div class="lp-demo-box lp-demo-box--lg lp-shadow-lg">lg</div>
    <div class="lp-demo-box lp-demo-box--lg lp-shadow-xl">xl</div>
</div>

Opacity

0 25 50 75 100

<div class="lp-d-flex lp-gap-3 lp-flex-wrap">
    <span class="lp-demo-box lp-demo-box--lg lp-bg-primary lp-text-white lp-opacity-0" style="opacity:0">0</span>
    <span class="lp-demo-box lp-demo-box--lg lp-bg-primary lp-text-white lp-opacity-25">25</span>
    <span class="lp-demo-box lp-demo-box--lg lp-bg-primary lp-text-white lp-opacity-50">50</span>
    <span class="lp-demo-box lp-demo-box--lg lp-bg-primary lp-text-white lp-opacity-75">75</span>
    <span class="lp-demo-box lp-demo-box--lg lp-bg-primary lp-text-white lp-opacity-100">100</span>
</div>

Ring

ring-1 ring-2 ring-4 success danger

<div class="lp-d-flex lp-gap-4 lp-flex-wrap lp-p-3">
    <span class="lp-demo-box lp-demo-box--lg lp-ring-1">ring-1</span>
    <span class="lp-demo-box lp-demo-box--lg lp-ring-2">ring-2</span>
    <span class="lp-demo-box lp-demo-box--lg lp-ring-4">ring-4</span>
    <span class="lp-demo-box lp-demo-box--lg lp-ring-2 lp-ring-success">success</span>
    <span class="lp-demo-box lp-demo-box--lg lp-ring-2 lp-ring-danger">danger</span>
</div>

Outline

solid dashed dotted offset-2

<div class="lp-d-flex lp-gap-3 lp-flex-wrap">
    <span class="lp-demo-box lp-demo-box--lg lp-outline lp-outline-2">solid</span>
    <span class="lp-demo-box lp-demo-box--lg lp-outline-dashed lp-outline-2">dashed</span>
    <span class="lp-demo-box lp-demo-box--lg lp-outline-dotted lp-outline-2">dotted</span>
    <span class="lp-demo-box lp-demo-box--lg lp-outline lp-outline-2 lp-outline-offset-2">offset-2</span>
</div>

Blur Filter

no blur

blur-sm

blur-md

blur-lg

<div class="lp-d-flex lp-gap-4 lp-flex-wrap">
    <div class="lp-text-xs lp-text-center"><div class="lp-demo-box lp-demo-box--lg lp-bg-primary lp-text-white">no blur</div></div>
    <div class="lp-text-xs lp-text-center"><div class="lp-demo-box lp-demo-box--lg lp-bg-primary lp-text-white lp-blur-sm">blur-sm</div></div>
    <div class="lp-text-xs lp-text-center"><div class="lp-demo-box lp-demo-box--lg lp-bg-primary lp-text-white lp-blur-md">blur-md</div></div>
    <div class="lp-text-xs lp-text-center"><div class="lp-demo-box lp-demo-box--lg lp-bg-primary lp-text-white lp-blur-lg">blur-lg</div></div>
</div>

Filters

normal grayscale sepia invert brightness-50 contrast-200

<div class="lp-d-flex lp-gap-3 lp-flex-wrap">
    <span class="lp-demo-box lp-demo-box--lg lp-bg-primary lp-text-white">normal</span>
    <span class="lp-demo-box lp-demo-box--lg lp-bg-primary lp-text-white lp-grayscale">grayscale</span>
    <span class="lp-demo-box lp-demo-box--lg lp-bg-primary lp-text-white lp-sepia">sepia</span>
    <span class="lp-demo-box lp-demo-box--lg lp-bg-primary lp-text-white lp-invert">invert</span>
    <span class="lp-demo-box lp-demo-box--lg lp-bg-primary lp-text-white lp-brightness-50">brightness-50</span>
    <span class="lp-demo-box lp-demo-box--lg lp-bg-primary lp-text-white lp-contrast-200">contrast-200</span>
</div>

Transform — Scale

75 100 110 125 150

<div class="lp-d-flex lp-gap-5 lp-items-center lp-p-4 lp-flex-wrap">
    <span class="lp-demo-box lp-demo-box--lg lp-scale-75">75</span>
    <span class="lp-demo-box lp-demo-box--lg lp-scale-100">100</span>
    <span class="lp-demo-box lp-demo-box--lg lp-scale-110">110</span>
    <span class="lp-demo-box lp-demo-box--lg lp-scale-125">125</span>
    <span class="lp-demo-box lp-demo-box--lg lp-scale-150">150</span>
</div>

Transform — Rotate

0 6 12 45 90 180

<div class="lp-d-flex lp-gap-5 lp-items-center lp-p-4 lp-flex-wrap">
    <span class="lp-demo-box lp-demo-box--lg lp-rotate-0">0</span>
    <span class="lp-demo-box lp-demo-box--lg lp-rotate-6">6</span>
    <span class="lp-demo-box lp-demo-box--lg lp-rotate-12">12</span>
    <span class="lp-demo-box lp-demo-box--lg lp-rotate-45">45</span>
    <span class="lp-demo-box lp-demo-box--lg lp-rotate-90">90</span>
    <span class="lp-demo-box lp-demo-box--lg lp-rotate-180">180</span>
</div>

Transitions

Hover any box to see the transition.

transition
(scale + shadow) colors
(bg + text) transform
(rotate + scale)

<p class="lp-text-xs lp-text-muted lp-mb-2">Hover any box to see the transition.</p>
<div class="lp-d-flex lp-gap-4 lp-flex-wrap">
    <span class="lp-demo-box lp-demo-box--lg lp-transition lp-duration-500 lp-cursor-pointer"
          onmouseover="this.classList.add('lp-scale-125','lp-shadow-xl')"
          onmouseout="this.classList.remove('lp-scale-125','lp-shadow-xl')">transition<br>(scale + shadow)</span>
    <span class="lp-demo-box lp-demo-box--lg lp-transition-colors lp-duration-500 lp-cursor-pointer"
          onmouseover="this.classList.add('lp-bg-success','lp-text-white')"
          onmouseout="this.classList.remove('lp-bg-success','lp-text-white')">colors<br>(bg + text)</span>
    <span class="lp-demo-box lp-demo-box--lg lp-transition-transform lp-duration-500 lp-cursor-pointer"
          onmouseover="this.classList.add('lp-rotate-12','lp-scale-110')"
          onmouseout="this.classList.remove('lp-rotate-12','lp-scale-110')">transform<br>(rotate + scale)</span>
</div>

CSS Reference

Class	Description
`.lp-shadow-{none\|sm\|md\|lg\|xl\|2xl\|inner}`	Box shadow
`.lp-opacity-{0\|25\|50\|75\|100}`	Opacity
`.lp-ring-{0\|1\|2\|3\|4\|8}`	Ring (box-shadow ring)
`.lp-ring-{color}` / `.lp-ring-inset`	Ring color / inset
`.lp-outline` / `.lp-outline-none`	Outline
`.lp-outline-{0\|1\|2\|4\|8}`	Outline width
`.lp-outline-{dashed\|dotted\|double}`	Outline style
`.lp-outline-offset-{0\|1\|2\|4\|8}`	Outline offset
`.lp-blur-{none\|sm\|md\|lg\|xl\|2xl\|3xl}`	Blur filter
`.lp-grayscale` / `.lp-sepia` / `.lp-invert`	Filter effects
`.lp-brightness-{0..200}` / `.lp-contrast-{0..200}`	Brightness / contrast
`.lp-saturate-{0..200}` / `.lp-hue-rotate-{n}`	Saturate / hue-rotate
`.lp-backdrop-blur-{none\|sm\|md\|lg\|xl}`	Backdrop blur
`.lp-scale-{0..150}`	Scale transform
`.lp-rotate-{0\|1\|2\|3\|6\|12\|45\|90\|180}`	Rotate (+ negative `-n`)
`.lp-translate-{x\|y}-{n}`	Translate
`.lp-skew-{x\|y}-{n}`	Skew
`.lp-origin-{9 positions}`	Transform origin
`.lp-transition` / `.lp-transition-{colors\|transform\|opacity\|all\|none}`	Transition target
`.lp-duration-{75..1000}`	Transition duration
`.lp-ease-{linear\|in\|out\|in-out}`	Transition easing
`.lp-mix-blend-{mode}` / `.lp-isolate`	Blend / isolation