ネオンボタンジェネレーターとは、SVGフィルタを使ってボタンの縁（リム）だけを光らせるCSSボタンを、コードを書かずに作れる無料ツールです。feSpecularLightingなどのSVGフィルタで縁に沿った反射光とグローを計算するため、画像を一切使わず、サイズや色を変えても光が破綻しません。ネオン・スポット・グラデーションといった光の出方を切り替え、そのまま貼れるHTMLとCSSを出力します。
「縁が光るボタン」をCSSで作ろうとすると、たいていはbox-shadowやfilter: drop-shadow()でぼんやりした光をまとわせるところで止まります。要素の外側全体に均一な光は出せても、「光源がどこにあって、縁のどこが強く光るか」という方向のある光や、ネオン管のように線そのものが発光する質感は、影をぼかすだけでは表現できません。かといって、Canvasやライブラリを持ち込むと一気に重くなります。
この記事では、CodeQuestが公開しているネオンボタンジェネレーターの使い方を解説します。SVGフィルタの光源（ライティング）で縁を照らす仕組み、光パターンや色・太さ・角丸の調整、回転や明滅といった自動アニメ、そしてコピペできるHTML/CSSの出力までを、実際の操作に沿って紹介します。ブラウザだけで完結し、登録は不要です。
「縁(リム)だけが光る」とは何か
このツールの特徴は、ボタンの面（中身）ではなく外周の線＝リムだけを光らせる点です。塗りつぶしの面はほぼ透明にしておき、角丸の輪郭線（ストローク）にだけSVGフィルタを当てて、その線が光って見えるようにしています。これにより、暗い背景の上で輪郭がネオンサインのように浮かび上がるボタンになります。
ポイントは、その光をbox-shadowのような「ぼかした影」ではなく、光源を置いて反射光として計算していることです。光源の角度や高さを変えると、縁のどこが強く光るかが変わり、光源を一周させれば光が縁を流れるように動きます。影をぼかすだけでは出せない、方向のある立体的な光がここから生まれます。
これをWebGLやCanvasなしで、SVGフィルタというブラウザ標準の機能だけで実現しているのが特徴です。出力されるのは自己完結したHTMLとCSS（自動アニメ時のみ小さなJavaScript）だけなので、貼り付け先のフレームワークを選びません。
このツールでできること
ネオンボタンジェネレーターは、縁が光るボタンをコードを書かずに作ることに特化しています。主な機能は次のとおりです。
| 機能 | 内容 |
|---|---|
| リムの発光 | SVGのfeSpecularLightingで縁の線を光源で照らし、反射光として光らせる |
| 光パターンの切り替え | 方向ライト・スポット・ネオン・グラデーションなど、光の出方をワンクリックで切り替え |
| 光源の調整 | 光源の角度・高さ・位置・コーン角を変え、縁のどこがどう光るかを細かく制御 |
| 色の設定 | リムの色・グロー色・グラデーションの多色・ボタンの面の色を個別に指定 |
| 形の調整 | ボタン幅・角丸・リムの太さ・立体感・滲みをスライダーで調整 |
| 自動アニメーション | 光源を回す回転や、明滅するパルス／フリッカーを出力（このときだけ小さなJSが付く） |
| ラベル | ボタン内の文字を設定。文字は光るリムとは別レイヤーなので色や文言を自由に変更 |
| コピペ出力 | 外部ライブラリ不要の自己完結したHTML/CSSを出力 |
入力したデータをサーバーに送信せず、すべてブラウザ内で処理します。生成したコードはそのまま商用サイトでも利用できます。
使い方：3ステップでコードを作る
操作はおおきく3ステップです。難しい設定はありません。
- 光パターンを選ぶ： 方向ライト・スポット・ネオン・グラデーションなどの中から、光の出方を選びます。まずは雰囲気の近いものを選び、あとから細かく調整するのがおすすめです。
- 色と形を調整する： リムの色・グロー色・ボタンの面の色を決め、太さ・角丸・滲み・光の強さ・鋭さのスライダーを動かして、プレビューを見ながら好みの光に仕上げます。必要なら自動回転をオンにして、光が縁を流れる動きも確認できます。
- コードをコピーする： 下部にHTMLとCSSが生成されるので、それぞれのコピーボタンを押して貼り付けます。ボタン内の文字はラベル欄で変更できます。
プレビューは暗い背景の上に表示されるので、実際の使用シーンに近い見え方をその場で確認できます。光は暗い背景でこそ映えるため、明るい背景に置く予定なら、リムの色を濃いめにして確認しておくと安心です。
なぜCSSだけで縁が光るのか：SVG feSpecularLighting の仕組み
結論から言うと、SVGフィルタのfeSpecularLighting（鏡面反射ライティング）で、縁の線を立体物に見立てて光源で照らしているからです。feSpecularLightingは、入力画像のアルファ値を「高さ」として読み取り、置いた光源との角度から反射ハイライトを計算するフィルタです。これを縁の線に適用すると、線が金属やガラスの管のように光って見えます。
ツールが出力するコードは、おおむね次のような形です。ボタンの中にインラインSVGを置き、その<filter>の中で「ぼかして高さを作る → 光源で照らす → 縁の形に切り抜く」という3段の処理をしています。
<button class="rim-btn" type="button">
<svg class="rim-btn__svg" viewBox="0 0 320 120" width="320" height="120" aria-hidden="true">
<defs>
<filter id="rimGlow" x="-50%" y="-50%" width="200%" height="200%"
color-interpolation-filters="linearRGB">
<!-- ① ボタンの形をぼかして「高さマップ」を作る -->
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="height" />
<!-- ② 光源で照らして反射ハイライト（鏡面反射）を計算 -->
<feSpecularLighting in="height" surfaceScale="8" specularConstant="1.2"
specularExponent="70" lighting-color="#7df9ff" result="spec">
<feDistantLight azimuth="135" elevation="46" />
</feSpecularLighting>
<!-- ③ 反射光をリム（縁の線）の形だけに切り抜く -->
<feComposite in="spec" in2="SourceAlpha" operator="in" />
</filter>
</defs>
<!-- ボタンの面（塗りはほぼ透明） -->
<rect x="14" y="14" width="292" height="92" rx="46" fill="#0b0e14" fill-opacity="0" />
<!-- 縁の線にフィルタを適用＝ここが光る -->
<g filter="url(#rimGlow)">
<rect x="14" y="14" width="292" height="92" rx="46"
fill="none" stroke="#ffffff" stroke-width="14" />
</g>
</svg>
<span class="rim-btn__label">CLICK</span>
</button>CSS側は、ボタンの素のスタイルを消し、SVGとラベルを重ねるだけのシンプルな構成です。光の表現はすべてSVGフィルタが担当するため、CSSには複雑な記述がありません。
.rim-btn {
position: relative;
width: 320px;
height: 120px;
padding: 0;
border: 0;
background: none; /* ボタンの素の見た目を消す */
cursor: pointer;
}
.rim-btn__svg {
position: absolute;
top: 0;
left: 0;
display: block;
overflow: visible; /* グローがはみ出しても切れないように */
}
.rim-btn__label {
position: absolute;
inset: 0;
display: grid;
place-content: center; /* ラベルを中央に重ねる */
font-size: 24px;
font-weight: 700;
letter-spacing: 0.28em;
color: #cfd4de;
}「光源角度」のスライダーはfeDistantLightのazimuthを、「光の鋭さ」はspecularExponentを、「滲み」はfeGaussianBlurのstdDeviationを動かしています。ネオンやパルスのように光源を使わないパターンでは、代わりに複数段のfeGaussianBlurとfeFloodで縁全体をにじませて発光させています。feSpecularLightingの各属性の意味は、MDNのfeSpecularLightingリファレンス と SVGフィルタの解説 も参考になります。
調整できるパラメータ一覧
プレビューを見ながら動かせるスライダーと入力項目は、大きく「光」「色」「形」「アニメ」の4グループに分かれます。どれを動かすとどこが変わるかを押さえておくと、狙った見た目に早くたどり着けます。
| パラメータ | 対応するSVG属性 | 効果 |
|---|---|---|
| 光源角度 | feDistantLightのazimuth | 平行光が縁を照らす向き。光るハイライトの位置が縁を一周する |
| 光源高度 | elevation | 光源の高さ。低いと縁を浅くなめ、高いと面側まで光が回り込む |
| 光源位置X／Y | feSpotLightのx／y | スポット系で集光する位置。狙った一点を強く光らせる |
| コーン角 | limitingConeAngle | スポットの絞り。狭いと一点集中、広いと縁全体に光が広がる |
| 光の鋭さ | specularExponent | ハイライトの締まり。大きいほど点に近いシャープな光になる |
| 光の強さ | specularConstant | 反射光の明るさ。上げると縁が強く発光する |
| グロー強度 | にじみの増幅率 | ネオン／パルス系で、外側へにじむ光の量を調整する |
| 滲み（ぼかし） | feGaussianBlurのstdDeviation | 縁のソフトさ。小さいとくっきり、大きいとふんわり光る |
| 立体感 | surfaceScale | 高さマップの起伏。反射ハイライトの出方が変わる |
| リムの太さ | stroke-width | 縁の線の太さ。太いほど光が乗りやすい |
| 角丸 | rx（border-radius相当） | 角の丸み。最大にすると両端が半円のピル形になる |
| 色／ボタンの濃さ | stroke／fill-opacity | リム色・グロー色・面の色と不透明度を個別に設定 |
| 回転速度／自動回転 | JSアニメーション | 光源を回す速さと、回転・明滅のオン／オフ |
迷ったら「光の鋭さ」と「リムの太さ」から触るのがおすすめです。鋭さを上げると引き締まった金属的な光に、下げるとやわらかいネオンに寄ります。太さは光の乗りやすさに直結するので、細いリムで光が弱いと感じたら少し太くしてみてください。
光パターン早見表
光の出方は複数のパターンから選べます。それぞれ「光源で照らす方式」と「縁全体をにじませて発光させる方式」に分かれ、向いている用途が違います。
| パターン | 光り方 | 向いている用途 |
|---|---|---|
| 方向ライト | 平行光が縁の片側を照らす。回転で光が縁を一周 | 金属的に光る標準のCTAボタン |
| ポイント | 点光源が縁の一点を強く光らせる | 光をピンポイントで効かせたいボタン |
| スポット | 絞った集光。コーン角で広がりを調整 | 一部だけ際立たせたいアクセント |
| ネオン | 光源なし。多段ぼかしで縁全体が発光 | ネオンサイン風の看板的なボタン |
| デュアル | 対向2灯（左右で別色）を合成 | 2色で立体感を出したいボタン |
| グラデーション | 多色グラデの縁が回転で流れる | カラフルに動く華やかなボタン |
| トライ | 3灯（120度差・3色）を合成 | 多色で複雑に光らせたいボタン |
| パルス | 縁全体が脈打つように明滅 | 注目を集めたい申込・通知系 |
| チェイス | 光が縁をぐるぐる走る | 動きで誘導したいボタン |
| フリッカー | 壊れたネオンのように不規則に明滅 | レトロ・サイバー演出 |
| 二重リム | 外側と内側の2層で光らせる | 厚みのある縁を見せたいボタン |
| アンダーグロー | 光を下方向へ逃がし、接地光のように | 浮いて見せたいフローティング系 |
| コーナー | 角だけを光らせる | さりげなく縁取りしたいボタン |
最初は「方向ライト」か「ネオン」が扱いやすく、外しにくい2種です。方向ライトは引き締まった金属的な光、ネオンはやわらかく全周が光る看板的な光、と覚えておくと選びやすくなります。
自動アニメーション（回転・明滅）の使いどころ
自動回転をオンにすると、光源の角度や位置を少しずつ動かすことで、光が縁を流れる・明滅するといった動きが付きます。このときだけ出力に小さなJavaScriptが含まれ、ブラウザの描画フレームに合わせて光源の値を更新します。静止のままなら出力はHTMLとCSSだけです。
動きは目を引く反面、SVGフィルタは1フレームごとに反射光を再計算するため描画コストが高めです。ページ内で常時動かすボタンは主役級の1〜2個に絞るのが安全です。一覧に並ぶボタンすべてを明滅させると、スクロールがもたつく原因になります。
また、動きのある演出は、その動きが苦手なユーザーへの配慮も必要です。実装する際はprefers-reduced-motionで動きを止める分岐を添えると親切です。ボタンのホバーやスクロール連動の動きを足したい場合は、CSS実装テクニック集 も合わせてどうぞ。
ブラウザ対応とパフォーマンスの注意
このツールが使うSVGフィルタ（feSpecularLighting・feGaussianBlurなど）は、Chrome・Edge・Safari・Firefoxの主要モダンブラウザで動作します。backdrop-filterのように一部ブラウザで無視される心配は基本的にありません。SVGフィルタの対応状況は、Can I useのSVGフィルタ対応表 で確認できます。
注意したいのは互換性よりもパフォーマンスです。光のにじみ（グロー）が外へ広がるパターンでは、光がフィルタ領域の外で切れないように、フィルタの描画範囲を要素より大きく取っています。範囲が広いほど計算するピクセルが増えるため、巨大なボタンや大量配置では負荷が上がります。次の点を意識すると安定します。
- 常時アニメは少数に： 回転・明滅するボタンはページに1〜2個まで。残りは静止＋ホバー時だけ反応、にすると軽い。
- グローを盛りすぎない： にじみと強度を上げるほど描画範囲が広がる。必要十分なところで止める。
- 同じボタンを量産しない： リスト内の全項目を光らせると重くなる。光らせるのは目立たせたい1つに絞る。
他のボタン系ツール・実装との使い分け
CodeQuestには光る・動くボタンを作るツールや記事が複数あります。質感の作り方が違うので、目的に合わせて選んでください。
| やりたいこと | 向いている方法 |
|---|---|
| 縁がネオン管のように光るボタンを作りたい | このツール（SVGフィルタのリム発光） |
| 金属的にぬらりと光る液体メタルのボタンにしたい | WebGLのリキッドメタルボタン |
| 面がグラデーションで塗られた動くボタンにしたい | グラデーションボタンの実装 |
| 背後を屈折させるガラスのボタンにしたい | リキッドガラスCSSジェネレーター |
金属的な光沢でぬめりのあるボタンを作りたいなら、WebGLで作るリキッドメタルボタンの記事 が向いています。シェーダーで質感を作るぶん表現力が高い代わりに、WebGLが前提になります。
縁ではなく面をグラデーションで塗って動かしたいなら グラデーションボタンの作り方、背後のコンテンツを屈折させるガラスのボタンなら リキッドガラスCSSジェネレーター が近道です。
よくある失敗・注意点
ネオンボタンでつまずきやすいポイントを3つにまとめます。
- 明るい背景に置いて光が見えない： 縁の発光は暗い背景でこそ映えます。白い背景に置くと光が飛んでしまうので、ボタンの周りだけ暗い帯を敷くか、リムの色を濃くして輪郭をはっきりさせてください。
- リムが細すぎて光が乗らない： 縁の線が細いと反射光が乗る面積が足りず、光が弱く見えます。リムの太さを上げるか、細い縁のままならネオン系のパターンを選ぶときれいに発光します。
- コードを移植したら光が四角く切れる： グローが要素の外へ広がるとき、
filterの描画範囲（x／y／width／height）が狭いと光が切れます。ツールはこれを自動で広げますが、手で縮めると切れるので、範囲は十分に取ってください。
よくある質問（FAQ）
Q. ネオンボタンジェネレーターは無料ですか？
はい。完全無料で、登録も透かしもありません。生成したHTML/CSSはそのまま商用サイトでも利用できます。入力データはサーバーに送信されず、すべてブラウザ内で処理されます。
Q. ライブラリやJavaScriptは必要ですか？
静止したボタンならHTMLとCSSだけで動き、ライブラリは不要です。自動回転や明滅をオンにしたときだけ、光源の値を更新する小さなJavaScriptが出力に含まれます。外部ライブラリの読み込みは要りません。
Q. なぜ画像を使わずに縁が光るのですか？
SVGフィルタのfeSpecularLightingで、縁の線を立体物に見立てて光源で照らし、反射光を計算しているためです。画像ではなく計算で光を作るので、ボタンのサイズや色を変えても光が破綻せず、コードも軽量に保てます。
Q. box-shadowで光らせるのと何が違いますか？
box-shadowは要素の外側に均一なぼかし光を出すもので、光の方向は表現できません。このツールは光源を置いて縁を照らすため、光源の角度・スポット・グラデーション・流れる動きといった方向のある光を作れる点が違います。
Q. スマホやSafariでも表示されますか？
はい。使用しているSVGフィルタは主要なモダンブラウザ（Chrome・Edge・Safari・Firefox）とスマホで表示されます。ただしフィルタの描画は負荷が高めなので、常時動くアニメーションは少数に絞り、グローを盛りすぎないのがスマホでも安定するコツです。
Q. 作ったボタンはそのままリンクにできますか？
出力は<button>要素ですが、<a>要素に置き換えればそのままリンクとして使えます。ボタン内の文字は光るリムとは別レイヤーの<span>なので、文言や色を自由に変更できます。
まとめ
- ネオンボタンジェネレーターは、SVGの
feSpecularLightingでボタンの縁（リム）だけを光源で照らして光らせるツール。WebGLもライブラリも不要 - 光源を使うため、
box-shadowでは出せない方向のある光・スポット・流れる光を表現できる - 方向ライト・ネオン・グラデーションなど複数の光パターンと、色・太さ・角丸・滲みを調整し、コピペできるHTML/CSSを出力
- SVGフィルタは主要ブラウザ対応。ただし描画負荷が高めなので、常時アニメは少数に絞るのが安定のコツ
- ブラウザ完結・登録不要で、生成コードは商用利用も可能
影をぼかすだけでは届かなかった「縁が光る」質感が、コピペで手に入ります。まずは「方向ライト」を選び、自動回転をオンにして光が縁を流れる様子を見るところから試してみてください。
作ったデザインを公開したあとは、検索エンジンに正しく見つけてもらう番です。CodeQuest.work SEOの無料診断で、サイトの構造化データや表示速度をチェックできます。
関連記事
WebGLで作るリキッドメタルボタン｜paper-design/shadersでメタリックUIを実装する