パターン
ドット / 16px
出力
radial-gradient(...)
デザインツール
CSS背景パターン - ドット、ストライプ、グリッド
dots、stripes、checkers、grids などの pure CSS background pattern を生成できます。色とサイズを調整し、装飾 background、placeholder texture、見た目の試作向け CSS をコピーできます。
CSSBackgroundPattern
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
设计配色
CSS背景パターン
dots、stripes、checkers、grids などの pure CSS background pattern を生成できます。色とサイズを調整し、装飾 background、placeholder texture、見た目の試作向け CSS をコピーできます。
Background Style Code
利用シーン
- 装飾的な page background を追加する
- placeholder texture を作る
- 繰り返し pattern を手早く試す
使い方
- pattern type を選ぶ
- 色とサイズを調整する
- preview して CSS をコピーする
入出力サンプル
FAQ
画像 file を生成しますか？
いいえ。出力は stylesheet に貼り付けられる CSS background code です。
custom pattern も定義できますか？
preset は dots、stripes、checkers、grids などをカバーします。さらに複雑な pattern は custom gradient を手作業で組む必要があります。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。
CSS グラデーションジェネレーター
CSS グラデーションジェネレーター - Linear、Radial、Conic
linear、radial、conic の CSS グラデーションを視覚的に作成できます。角度や stop 位置を調整し、複数 stop を追加して、背景、ボタン、ブランド遷移向けの CSS をコピーできます。
CSS グラデーション 背景
CSSグラスモーフィズム
CSSグラスモーフィズム - すりガラス風カード生成
color、opacity、blur、outline を調整し、backdrop-filter を使った frosted glass card の CSS を preview しながら生成できます。半透明 panel や nav layer の調整向けで、処理はすべてブラウザ内です。
CSS Glassmorphism backdrop-filter