CSSデコ盛りジェネレーターとは？文字と箱の装飾をまとめて CSS に
見出しやボタン、バナーの文字に、縁取り・影・グラデーション・動きなどの装飾を重ねて、その CSS をまとめて書き出すツールです。背景・角丸と枠線・ボックスシャドウ（box-shadow）・テキストシャドウ（text-shadow）・文字の縁取り（-webkit-text-stroke）・フィルター・すりガラス（backdrop-filter）・変形・アニメーションとホバーの各項目を、スライダーを動かしながらプレビューで確認できます。
全体装飾プリセット（15種）から始めて、気になるところだけ直すこともできます。処理はブラウザの中だけで行い、設定がサーバーに送られることはありません。
生成したコードの使い方
- 見た目を決める。「全体装飾プリセット」から近いものを選び、背景・枠線・影などの項目を開いて調整します。プレビューの文字や幅・高さも変えられます。
- 出力の形式を選ぶ。「CSS」タブは
.deco-boxというクラスのスタイルとして、「Inline」タブは HTML のstyle="…"属性として出力します。 - コピーして貼り付ける。Copy ボタンでコピーし、「CSS」タブのものはスタイルシートに、「Inline」タブのものは装飾したい要素のタグに貼ります。CSS タブの場合は、要素に
class="deco-box"を付けるか、クラス名を自分のものに書き換えて使います。
ホバー時の動きとアニメーション（@keyframes）は、style 属性には書けないため「Inline」タブには含まれません。動きを使うときは「CSS」タブのコードを使ってください。
ブラウザ対応
| ブラウザ | 文字の縁取り-webkit-text-stroke |
文字の影text-shadow |
|---|---|---|
| Chrome・Edge | Chrome 4 以降・Edge 15 以降 | Chrome 2 以降・Edge 12 以降 |
| Safari（Mac・iPhone） | Safari 3 以降・iPhone 2 以降 | Safari 1.1 以降・iPhone 1 以降 |
| Firefox | 49 以降 | 3.5 以降 |
出典: MDN の互換性データ（browser-compat-data 8.1.2、2026年9月時点）。-webkit-text-stroke は名前に -webkit- が付いていますが、Firefox・Edge を含む主なブラウザで使えます。
よくある質問 (FAQ)
ホバーやアニメーションを使うなら「CSS」、1か所だけ手早く飾るなら「Inline」です。「CSS」タブは
.deco-box クラスのスタイルとして出力し、ホバー時の指定や @keyframes も含みます。
「Inline」タブはタグにそのまま貼れる style 属性ですが、ホバーとアニメーションは style 属性に書けないため含まれません。
-webkit-text-stroke の線は、文字の輪郭の内側と外側に半分ずつかかるためです。線を太くするほど文字の内側が削られたように見えます。
太い縁取りにしたいときは、文字サイズを大きくするか、太めのフォントと組み合わせると形が崩れにくくなります。
「アニメ＆ホバー」の項目で、くり返し動くアニメーションとマウスを乗せたときの動きを設定できます。アニメーションは、ふわふわ浮く・脈打つ・回転・跳ねる・点滅・揺れるなどから選び、1回の長さを変えられます（動きの速さの変化は種類に合わせて自動で決まります）。イージングの選択は、ホバーしたときの変化に効きます。
ホバーでは、拡大縮小・上に浮く動き・影のぼかしを指定できます。
出力には幅・高さや文字サイズも含まれるので、使う場所に合わせて消すか書き換えてください。クラス名
.deco-box は、既存のクラスとぶつからない名前に変えて使うと安全です。
装飾を重ねすぎると文字が読みにくくなるので、見出しやボタンなど目立たせたい要素に絞るのがおすすめです。