CSSでグラデーションアニメーション作成
～ロゴにメッシュグラデーションをCSSでデザイン実装～

今回は、コーディングで実装できるメッシュグラデーションのCSSアニメーション事例を紹介します。

最初は1枚の画像

最初は、メッシュグラデーション画像をトリミングしてデザインしたものでした。
この画像をそのまま静止画として使うのではなく、色を抽出してCSS化し、グラデーションが動き続けるアニメーションを加えることから始めました。

コーディング作業に入る段階で、サイトの目的を改めて整理するブラッシュアップを行い、当社の強みを伝えるヒーローエリアを設置することに。
そこで、ロゴに加えたアニメーションに、テーマカラーに沿った配色の変化を組み込み、動き続ける表現にしました。
色が混ざり合い、変化し続ける様子は、Web制作の過程を想起させます。

CSSカスタムプロパティ＋Sass

複数の色が円形に回転しながら、ロゴの形状に沿ってブレンドされるアニメーションです。

色の定義

各頂点の色をCSS変数で定義します。

:root {
    --mesh-color-1: *color-code-1*;
    --mesh-color-2: *color-code-2*;
    --mesh-color-3: *color-code-3*;
}

※任意のカラーコードを指定

カスタムプロパティで座標を管理

@for $i from 1 through $points {
    @property --x#{$i} {
        syntax: "";
        initial-value: #{$center + "%"}; 
        inherits: false;
    }
    @property --y#{$i} {
        syntax: "";
        initial-value: #{$center + "%"}; 
        inherits: false;
    }
}

• $points：メッシュ頂点の数
• @property：CSS Houdiniでアニメーション可能な変数を定義
• --x1, --y1 ... といった形で頂点座標を管理
• 初期値は中心（例: 50%）

この仕組みにより、CSSだけで頂点の座標をリアルタイムに更新できます。

円形運動を計算する関数

@function circle-pos($angle) {
    $rad: $angle * math.$pi / 180;
    $x: $center + $radius * math.cos($rad);
    $y: $center + $radius * math.sin($rad);
    @return ($x, $y);
}

• $angle（度） → ラジアンに変換
• $radius：円の半径
• $center：中心座標
• 出力は (x, y) の配列

この関数で、頂点を円運動させる座標を簡単に計算できます。

アニメーションのキーを作成

@keyframes moveMesh {
    @for $f from 0 through ($frames - 1) {
        $percent: (100 * $f / ($frames - 1));
        $step: 360 * $f / ($frames - 1);
        #{$percent}% {
            @for $i from 1 through $points {
                $angle: $step + (360 / $points) * ($i - 1);
                $pos: circle-pos($angle);
                --x#{$i}: #{nth($pos, 1)}%;
                --y#{$i}: #{nth($pos, 2)}%;
            }
        }
    }
}

• $frames：アニメーションのフレーム数
• 各頂点を順番に円周上に移動
  
• CSS変数を更新することで、radial-gradient の位置も自動で変化

結果、色の頂点が滑らかに動くアニメーションになります。

メッシュグラデーションを生成

@mixin mesh-gradients() {
    $gradients: ();
    @for $i from 1 through length($mesh-points) {
        $pos: nth($mesh-points, $i);
        $color: unquote("var(--mesh-color-#{$i})");
        $gradient: radial-gradient(
            at #{nth($pos, 1)} #{nth($pos, 2)},
            #{$color} 0%,
            rgba(#fff, 0) 70%
        );
        $gradients: append($gradients, $gradient, comma);
    }
    background: #{$gradients};
}

• $mesh-points：動かす頂点のリスト
• 各頂点に radial-gradient を作成
• 複数のグラデーションを 重ね合わせ ることでメッシュ状の表現
• 透明度を設定することで色が自然にブレンド

ロゴに適用

.mesh-gradients {
    @include mesh-gradients();
    width: 300px;
    height: 300px;
    mask: url(logo.svg) no-repeat center / contain;
    animation: moveMesh 10s linear infinite alternate;
}

• mask-image でロゴ形状に切り抜き
• animation でメッシュを動かす
• alternate → 前後に動かして自然なループ

これでロゴの内部が動くグラデーションのアニメーションになります。

ブラウザサポート

@propertyはモダンブラウザでサポートされていますが、古いブラウザではアニメーションが動作しない可能性があります。

• Chrome/Edge: 85+
• Firefox: 128+
• Safari: 16.4+

この手法のメリット

1. パフォーマンス: CSSアニメーションなのでGPUアクセラレーションが効く
2. 柔軟性: 色・速度・形状を簡単にカスタマイズ可能
3. 保守性: Sassの変数とループで管理しやすいコード
4. デザイン性: 静的なロゴに動きを加えられる
5. ブランディング効果: ファーストビューでの印象付け

ロゴだけでなく、背景装飾など、様々な場面で応用できるテクニックです。ぜひ試してみてください。

株式会社リアライズでは、ホームページ制作を随時承っております！

弊社は京都にありますが、Web会議や電話、メールでのやり取りにより、地域を問わず柔軟に対応いたします。

成果が出せるWeb制作をサポートします！
まずはお気軽にご相談ください。