Polka Dot Background Generator
Preview
CSS Code
使い方
1. 水玉の配置を選ぶ
「水玉の配置」をラジオボタンで選択すると、プレビューが即座に更新されます。
- 縦一列(水玉が縦方向に整列)
- レンガ型(水玉が交互に配置される)
2. 水玉のサイズと間隔を調整
スライダーで 水玉のサイズ と 水玉同士の間隔 を調整できます。
- 水玉のサイズ (px) … 水玉(ドット)の大きさを調整
- 水玉の間隔 (px) … 水玉同士の間隔を調整
サイズを大きくすると、ポップなデザインになり、間隔を狭くすると細かい水玉模様が作れます。
3. 色を設定
カラーピッカーで 水玉の色 と 背景色 を自由に設定できます。シンプルな白黒デザインや、カラフルな水玉柄にも対応できます。
4. CSSコードをコピー
調整が完了したら、「CSSコードをコピー」ボタンをクリック すれば、生成されたCSSコードを簡単に取得できます!
そのまま WebサイトのCSSに貼り付けるだけでOK です。