Blurs

Background blurs are often used stylistically in modern UI design. However, just like shadows, they allow you to add depth and realism to designs by positioning elements on a z-axis.

NameValue
none0
sm4px
md8px
lg12px
xl20px

sm

md

lg

xl

sm

md

lg

xl

<template> <div class="blur-none">none</div> <div class="blur-sm">sm</div> <div class="blur-md">md</div> <div class="blur-lg">lg</div> <div class="blur-xl">xl</div> </template>
// WIP
// WIP
// WIP