Effects
Opacity, shadows, filters, backdrop blur, blend modes, clipping and masks.
1 min readv1
HTML
<div nib="d=flex; g=16px; ali=center; flxw=wrap">
<div nib="w=80px; h=60px; bdrd=12px; bgc=#fff; bxsh=0 10px 30px rgba(15,23,42,.18)"></div>
<div nib="w=80px; h=60px; bdrd=12px; bgc=#4F52D9; opc=.5"></div>
<div nib="w=80px; h=60px; bdrd=12px; bgi=linear-gradient(135deg,#4F52D9,#06b6d4); flt=grayscale(1)"></div>
<div nib="w=80px; h=60px; bgc=#0891b2; clp=polygon(50% 0, 100% 100%, 0 100%)"></div>
</div>Frosted glass#
HTML
bdf=blur(10px)
<div nib="pos=relative; w=280px; h=120px; bdrd=16px; ovf=hidden; bgi=linear-gradient(135deg,#4F52D9,#f59e0b)">
<div nib="pos=absolute; ins=16px; bdrd=12px; bgc=rgba(255,255,255,.18); bdf=blur(10px) saturate(1.4); bd=1px solid rgba(255,255,255,.35); cl=#fff; d=grid; pli=center; ftw=700">bdf=blur(10px)</div>
</div>All effect shorthands#
Shorthand | CSS property |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|