CSSカスタムプロパティ（var(--x)）は今やWeb制作の必需品ですが、「ホバー時に変数の色を滑らかにアニメーションさせたい」という場面では壁にぶつかります。通常のvar()はCSSエンジンが型を認識しないため、transitionによる補間が効かず、値は瞬時に切り替わるだけです。これを解決するのが@propertyルール。カスタムプロパティに「型（<color>・<number>・<angle>）」と「初期値」を与えると、CSS変数自体を直接アニメーションできるようになります。Chrome・Firefox・Safariの現行バージョンで対応済みで、2026年は実用段階に入った技法です。
今回は@propertyの活用パターンをボタンで体感できる5種類のデモを用意しました。色補間・グラデーション回転・数値型によるglow制御・色相シフト・複数プロパティの連動アニメーションと、段階的に@propertyの世界を広げていきます。すべてCSSのみで実装しており、コピーしてCodePenやWordPress/SWELLにそのまま貼り付けて使えます。
Color Morph（カラー・モーフ）
@property --btn-color { syntax: '<color>' } でカスタムプロパティに色型を登録したデモです。通常のCSS変数ではbackground: var(--color)にtransitionを設定しても瞬時に切り替わるだけですが、@propertyでCSSエンジンに「これは色の値だ」と宣言すると、2色の間の色空間を通った滑らかな補間アニメーションが発生します。青（#3b82f6）から紫（#8b5cf6）へ、0.5秒かけてじわっと変化するこの動き。background: var(--btn-color) という1行だけで実現できます。
@propertyの基本として最初に把握しておきたい実装です。「グラデーションではなく、単色で色をアニメートしたい」という場面で活躍します。コーポレートサイトのCTAボタンや、ブランドカラーを活かしたLPのメインボタンに。
See the Pen Color Morph by BaseKENT (@basekent) on CodePen.
調整方法
- 元の色:
initial-value: #3b82f6をブランドの主役カラーに変更してください - ホバー色:
.btn:hover { --btn-color: #8b5cf6 }をアクセントカラーに合わせます - 変化速度:
transition: --btn-color 0.5s easeの秒数を0.3sにするとキビキビした応答に、1sにするとゆっくりとした変化になります
Angle Spin（アングル・スピン）
@property --rotation { syntax: '<angle>' } で角度型のカスタムプロパティを登録し、conic-gradient(from var(--rotation), ...) の開始角度をアニメートするデモです。conic-gradientは角度起点のグラデーションですが、通常のCSS変数では角度をtransitionで補間できません。<angle>型として登録することで、0deg→360degへの一周がtransitionによってスムーズに補間されます。ホバーするたびにカラフルなグラデーションがぐるっと一回転。
0.8s linearの一定速で動くので、回転に勢いと遊び心があります。先頭と末尾の色を同じにすることで、ループの継ぎ目も自然に見えます。音楽系・エンターテインメント系のサイト、ゲーム系LPのCTAボタンに映えるデモです。
See the Pen Angle Spin by BaseKENT (@basekent) on CodePen.
調整方法
- グラデーションの色:
#3b82f6, #8b5cf6, #ec4899, #3b82f6の色を変更してください。先頭と末尾を同じ色にするとループが自然に見えます - 回転速度:
transition: --rotation 0.8s linearの秒数を0.4sにすると高速回転に、1.5sにするとゆっくり一回転になります - 角丸:
border-radius: 8pxを50pxにするとピル型ボタンでも同じエフェクトが映えます
Number Glow（ナンバー・グロウ）
@property --glow { syntax: '<number>' } で数値型のカスタムプロパティを登録し、calc(var(--glow) * 2px) という式の中の数値を動かすデモです。box-shadowのblurやspread値を個別にアニメートするには、従来はbox-shadowプロパティ全体を変化させるしかありませんでした。<number>型の@propertyを使うと、shadow全体ではなく「数値の部分だけ」を補間できます。ホバーで--glow: 12に変化すると、blur: 24px / spread: 6pxの発光リングがじわっと外側へ広がります。
グリーン系のボタンがホバーした瞬間にゆっくりと外側へ発光していく様子は、「押すと反応してくれる感」が心地よいです。box-shadow全体ではなく数値で制御しているため、発光の太さとぼかしのバランスをcalc()式で独立して調整できる点が利点です。エコ系・ヘルスケア系・ポジティブなアクション誘導のボタンに。
See the Pen Number Glow by BaseKENT (@basekent) on CodePen.
調整方法
- ボタン色と発光色:
background: #10b981を変更したら、rgba(16, 185, 129, 0.5)のRGB値も合わせて変更してください - 発光の広がり:
.btn:hover { --glow: 12 }の数値を8にすると控えめに、20にするとより派手な発光になります - 発光の透明度:
rgba(..., 0.5)の最後の値を0.8に上げると濃い発光に、0.2に下げると淡い光輪になります
Gradient Shift（グラジエント・シフト）
@property --hue { syntax: '<angle>' } で色相角度を型付きプロパティとして登録し、hsl(var(--hue), 75%, 55%) の色相（hue）をアニメートするデモです。hsl()の第一引数は角度で、0deg=赤・120deg=緑・240deg=青というカラーホイールを一周します。220deg（青系）から310deg（ピンク/マゼンタ系）への変化はホイール上の90度の旅。hsl(calc(var(--hue) + 60deg), ...)で常に60度ずれた色がペアになるため、どんな色相でもグラデーションのバランスが崩れない設計です。
グラデーションの2色が同時に色相だけを変えながらシフトする動きは、「塗りが変わっていく感」が上品です。initial-valueの角度を変えるだけで全体の配色イメージが変わるため、ブランドカラーへの適用が容易。ポートフォリオ・クリエイティブ系サイトのメインCTAに向いています。
See the Pen Gradient Shift by BaseKENT (@basekent) on CodePen.
調整方法
- 元の色相:
initial-value: 220degを変えると初期の配色が変わります。0deg=赤系、120deg=緑系、240deg=青系が基準です - ホバー色相:
.btn:hover { --hue: 310deg }を変更。initial-valueとの差が大きいほど色の変化が激しくなります - グラデーションの角度:
linear-gradient(135deg, ...)を90degにすると縦グラデーション、0degにすると横グラデーションになります
Multi Prop Cascade（マルチ・プロップ・カスケード）
@propertyを3つ同時に定義し、1回のホバーで「背景色変化（--bg）・発光拡大（--glow）・シャイン回転（--angle）」を連動させるデモです。--bgは<color>型・--glowは<number>型・--angleは<angle>型とそれぞれ型が異なります。ホバーすると背景が#1e293b（ダーク）から#6366f1（インディゴ）に変わりながら、外側に発光リングが広がり、::beforeのconic-gradientがシャインとして一周する複合演出です。
3つのtransitionにイージングの違いを持たせているため、色・光・輝きが微妙にずれたタイミングで動き出します。@propertyなしでは書けない「複数の型付き変数の同時アニメーション」の設計美が体感できる一本です。SaaSのCTAボタン、ポートフォリオサイトのメインボタンに。
See the Pen Multi Prop Cascade by BaseKENT (@basekent) on CodePen.
調整方法
- 背景色の変化:
initial-value: #1e293bが初期色、.btn:hover { --bg: #6366f1 }がホバー時の色です。ブランドカラーに合わせて両方調整してください - 発光の強さ:
--glow: 10の数値を大きくするとより強い光輪になります。--glow: 0のままにすると発光なしでシャインアニメーションだけを使えます - シャインのスピード:
--angleのtransition: 0.8s easeを0.5sにすると素早い一閃に、1.5sにするとゆっくり流れる輝きになります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
