ドットや水玉の背景パターンを直感的に作成できるツールです。
サイズや間隔、ずらし配置、背景色を調整しながら、そのまま使える CSS を生成できます。
このツールは … 回使われています。
background-color: #f8fafc;
Presets
CSSコードの使い方
コピーしたコードを背景を付けたい要素の CSS に貼り付けるだけで使えます。
例: カード背景に適用する場合
.my-card { /* 生成したコードを貼り付け */ background-color: #f8fafc; background-image: radial-gradient(circle, #1d4ed8 0 48%, transparent 52%); /* そのほかのスタイル */ border-radius: 24px; color: #0f172a; }
生成されるコードは背景色を含んだ完成形なので、そのまま貼り付けて使えます。
ドット背景をきれいに作るコツ
Gap を広めに取る
余白を十分に作ると、背景として使っても主張しすぎず、テキストが読みやすくなります。
余白を十分に作ると、背景として使っても主張しすぎず、テキストが読みやすくなります。
Offset 配置でやわらかくする
千鳥配置にすると、規則性は保ちつつもストライプ感が出にくく、やさしい印象になります。
千鳥配置にすると、規則性は保ちつつもストライプ感が出にくく、やさしい印象になります。
Softness を少しだけ足す
ドットの縁を少しぼかすと、ポップな水玉から上品なテクスチャまで幅広く使えます。
ドットの縁を少しぼかすと、ポップな水玉から上品なテクスチャまで幅広く使えます。