ボタンにカーソルを乗せた瞬間、インクが染み出すように色が広がっていく。中心からじわじわと──そんな水彩画のような動きをCSSだけで作れるのが「スプレッド・スプラッシュ」系のエフェクトです。クリックを促すCTAボタンに仕込んでおくと、視線が自然にそこへ引き寄せられます。
今回は5種類のスプラッシュエフェクトを紹介します。JavaScriptは一切使わず、コピペ後にCSSの数値を変えるだけでサイトのカラーに合わせられます。WordPress（SWELLテーマ）でもそのまま使えます。
Ink Drop（インク・ドロップ）
中心からインクの滴が落ちて広がるような、もっとも「スプラッシュらしい」エフェクトです。background-size を 0% 0% から 320% 320% へアニメーションさせるのが核心で、radial-gradient の白い円が中央点から外側へと膨張していきます。
背景色はそのままに、ホバーで別の色が染み出してくる──というシーンチェンジ感のある演出です。コーポレートサイトのCTAや、LP（ランディングページ）のメインボタンに置くと目を引きます。
See the Pen Ink Drop by BaseKENT (@basekent) on CodePen.
調整方法
- 背景ベース色:
.btnのbackground-color: #2563ebを変更してください - 広がる速度:
transition: background-size 0.65sの数値を大きくするとゆっくり広がります - 広がり最大値:
background-size: 320% 320%を200%にするとやや小さく収まります
Paint Splash（ペイント・スプラッシュ）
絵の具が弾けて広がるような、ポップさのあるエフェクトです。::before 疑似要素を円形に設定し、scale(0) から scale(1) へのトランジションで中心から塗りが膨張してボタン全体を覆います。overflow: hidden でボタン外にはみ出た部分をマスクすることで、丸いバブルがボタンの形に収まる演出になります。
アクセントカラーを前面に押し出したい場面に向いています。ダーク系の背景に置くと特にコントラストが際立ちます。
See the Pen Paint Splash by BaseKENT (@basekent) on CodePen.
調整方法
- スプラッシュカラー:
background: #f472b6を任意の色に変更してください（border-colorも合わせて変えると統一感が出ます） - 広がるスピード:
transition: transform 0.55sの数値で速度を調整できます - イージング:
cubic-bezier(0.22, 0.61, 0.36, 1)をease-outに変えると少し柔らかい動きになります
Ripple Wave（リップル・ウェーブ）
@property でCSS変数を「型付き」で登録し、radial-gradient の色境界位置を直接アニメーションさせる2024年型の実装です。通常のCSS変数はトランジションが利きませんが、@property で syntax: '<percentage>' として登録することで、グラデーションの境界が 0% から 160% へとスムーズに遷移します。
同じスプラッシュ系でもこのデモはコードがもっともシンプルで、仕組みを理解しやすい構造になっています。Chrome 85+・Firefox 128+・Safari 16.4+ に対応しており、2025年現在ほぼすべての環境で動作します。
See the Pen Ripple Wave by BaseKENT (@basekent) on CodePen.
調整方法
- 広がる新色:
#10b981を変更してください - 初期色:
#064e3bを変更してください - アニメーション量:
--spread: 160%の数値を上げると、より速く・大きく広がります
Lava Blob（ラヴァ・ブロブ）
溶岩が湧き上がるように、複数の色のかたまりがボタン内で同時に広がるエフェクトです。background-image に3つの radial-gradient を重ね、それぞれ異なるポジション（左下・右上・中央）から発生させることで、有機的な「溶け合い」感を表現しています。
ゲーム系・エンタメ系・プロモーション系のサイトで「普通じゃないボタン」が欲しいときに使えます。初期状態のベース色に暗い赤系を使うとラヴァランプ感が強まります。
See the Pen Lava Blob by BaseKENT (@basekent) on CodePen.
調整方法
- ベース色:
background-color: #b91c1cをお好みの暗色に変更してください - ブロブの位置:
background-position: 25% 60%, 75% 40%, 50% 50%の値を変えると発生位置が移動します - 広がりサイズ:
background-size: 200% 200%, 200% 200%, 140% 140%の値を調整することでブロブのサイズ感が変わります
Shockwave（ショックウェーブ）
インクが広がる動きと、外側へ走る衝撃波リングを同時に発動させるダブルエフェクトです。background-size アニメーションで内部から色が膨張し、同時に box-shadow の spread 値が広がりながら rgba(..., 0) へと透明になっていきます。「中から押し広げて外まで震わせる」ような視覚的衝撃が特徴です。
CTAボタンに置いたとき、ユーザーの目が一瞬そこに引き寄せられる効果があります。紫系のカラーと相性が良く、SaaS・テック系のサイトに馴染みます。
See the Pen Shockwave by BaseKENT (@basekent) on CodePen.
調整方法
- ベース色:
background-color: #7c3aedとbox-shadowのrgba(167, 139, 250, 0.55)を合わせて変更してください - 衝撃波の広がり:
box-shadow: 0 0 0 22px rgba(...)の22pxを大きくすると衝撃波が遠くまで広がります - 内部フィル色:
radial-gradient内の#a78bfaを変えると、ホバー後に残る色を調整できます
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
