フロントエンド開発をサポートするオンラインジェネレーター

背景に水玉柄(縦一列・レンガ型)が作れるCSSジェネレーター

Polka Dot Background Generator

Preview

CSS Code

使い方

1. 水玉の配置を選ぶ

「水玉の配置」をラジオボタンで選択すると、プレビューが即座に更新されます。

  • 縦一列(水玉が縦方向に整列)
  • レンガ型(水玉が交互に配置される)

2. 水玉のサイズと間隔を調整

スライダーで 水玉のサイズ水玉同士の間隔 を調整できます。

  • 水玉のサイズ (px) … 水玉(ドット)の大きさを調整
  • 水玉の間隔 (px) … 水玉同士の間隔を調整

サイズを大きくすると、ポップなデザインになり、間隔を狭くすると細かい水玉模様が作れます。

3. 色を設定

カラーピッカーで 水玉の色背景色 を自由に設定できます。シンプルな白黒デザインや、カラフルな水玉柄にも対応できます。

4. CSSコードをコピー

調整が完了したら、「CSSコードをコピー」ボタンをクリック すれば、生成されたCSSコードを簡単に取得できます!
そのまま WebサイトのCSSに貼り付けるだけでOK です。

よかったらシェアしてね!
  • URLをコピーしました!