グラデーションジェネレーター
グラデーションジェネレーター
度
200px
200px
プレビュー
生成されたCSS:
ボックスシャドウジェネレーター
ボックスシャドウジェネレーター
10px
10px
20px
0px
30%
200px
200px
プレビュー
生成されたCSS:
角丸ジェネレーター
角丸ジェネレーター
10px
10px
10px
10px
200px
200px
プレビュー
生成されたCSS:
フレックスボックスジェネレーター
フレックスボックスジェネレーター
10px
プレビュー
1
2
3
生成されたCSS:
テキストシャドウジェネレーター
テキストシャドウジェネレーター
2px
2px
4px
48px
プレビュー
サンプルテキスト
生成されたCSS:
トランスフォームジェネレーター
トランスフォームジェネレーター
0deg
1
1
0px
0px
0deg
0deg
200px
200px
プレビュー
TRANSFORM
生成されたCSS:
グリッドジェネレーター
グリッドジェネレーター
3
3
10px
プレビュー
使い方：
- 空のセルをクリック → アイテム追加
- アイテムをドラッグ → 移動
- 右下のハンドル → サイズ変更
- 右クリック → アイテム削除
- Delete/Backspace → 選択中のアイテム削除
- Escape → 選択解除
- 空のセルをタップ → アイテム追加
- アイテムをドラッグ → 移動
- 右下のハンドル → サイズ変更
- ×ボタンをタップ → アイテム削除
生成されたCSS:
マージン・パディングジェネレーター
マージン・パディングジェネレーター
マージン設定
パディング設定
ウィンドウサイズが小さい場合や、マージン・パディングの値が大きい場合にレイアウトの崩れが発生することがあります。スマートフォンでは本ツールは利用できません。
プレビュー
マージン（赤）
パディング（緑）
コンテンツ（青）
要素
margin-top
margin-right
margin-bottom
margin-left
padding-top
padding-right
padding-bottom
padding-left