BACKGROUND / 087
Repeat the
small things.
DOTSCSS ONLY
CSS GENERATOR · BACKGROUND IMAGE
CSS Background Pattern Builder
ドット・格子・ストライプを、CSSだけでつくる。
LIVE PATTERN BUILDER
パターンを選んで、見た目を調整する
NO IMAGE FILEDOTS
小さな円を、指定した間隔で繰り返します。
CSS PREVIEWRepeat the
TYPEDOTS
TILE28 × 28px
LAYERS2
FORMATCSS
PATTERN CATALOG
CSSだけで様々なパターンの表現が可能
HOW IT WORKS
背景のサイズと開始位置を決めて、繰り返す
形を作る
linear-gradient()、radial-gradient()、conic-gradient()で1タイル分の形を作ります。
単位と開始位置を決める
background-sizeで間隔を、background-positionで描画の開始位置を指定します。
重ねる
格子のようなパターンは、縦線と横線のグラデーションをカンマで重ねます。