Backgrounds
Background colours, images, gradients, position, size and clipping.
1 min readv1
HTML
<div nib="d=grid; gtc=repeat(3, 90px); g=10px">
<div nib="h=70px; bdrd=10px; bgc=#4F52D9"></div>
<div nib="h=70px; bdrd=10px; bgi=linear-gradient(135deg, #4F52D9, #06b6d4)"></div>
<div nib="h=70px; bdrd=10px; bgi=radial-gradient(circle at 30% 30%, #fde68a, #f59e0b)"></div>
</div>Gradient text#
HTML
Gradient text
<h3 nib="m=0; fts=32px; ftw=900; bgi=linear-gradient(90deg, #4F52D9, #06b6d4); bgl=text; -webkit-background-clip=text; cl=transparent">Gradient text</h3>Images#
HTML
<section nib="bgi=url(/hero.jpg); bgs=cover; bgp=center; bgr=no-repeat; mnh=60vh">All background shorthands#
Shorthand | CSS property |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|