背景 & グラデーション

背景 & グラデーションに分類されるWeb表現技法12件。アニメーショングラデーション、メッシュグラデーション、SVGノイズ質感、動く幾何学パターンなど。ライブデモとコピーできるコード付き。

background-position をアニメーションさせ、4色のグラデーションが無限にループする背景。ヒーローセクションやランディングページの土台に使えます。

複数の radial-gradient を重ねて有機的な色面を作り、JSで各色溜まりを漂わせるメッシュ背景。SaaSやポートフォリオのヒーローに最適です。

feTurbulence で生成した粒状ノイズをグラデーションに重ね、上質なマット質感を演出。ボタンでノイズの粗さを切り替えられます。

canvas で三角格子を描き、サイン波に沿って各点を明滅させる動的背景。テック系のLPやダッシュボードの背景に使えます。

ぼかした光の帯をゆっくり揺らし、星空とともに夜空のオーロラを再現するCSS背景。ダークテーマのヒーローに映えます。

CSSのドット格子にマウス追従のスポットライトを重ねた背景。マスクで照らした部分だけドットを濃く見せます。ダッシュボード向け。

@property で角度を回転させた conic-gradient のボーダーがカードの縁を発光させる演出。価格表やバッジカードに使えます。

JSで制御点の半径を補間し、SVGパスを滑らかに変形させる有機的な背景。遊び心のあるLPの主役背景になります。

半透明のサイン波リボンを canvas で加算合成し、しなやかに流れる絹のような発光背景を描きます。高級感あるヒーローに。

夕焼け空に沈む太陽とパースの効いたグリッドを手前へ流す、80年代風シンセウェイブ背景。CSSのみで完結します。

半透明の円・三角・リング・カプセルがゆっくり漂い、マウス位置に応じて視差で奥行きが動く没入感のある背景。前景に短いコピーを置けばヒーロー風に。SANKOU!系の「背景が動く」トレンドを自己完結のCSS/SVGで再現します。

下端に向かって段階的に強くぼかす backdrop-filter 層を mask グラデで重ね、写真の上に置いた固定ナビと見出しの可読性を高める手法。Apple/iOS 風の上品なフェードブラーで、ヒーローやアプリUIに使えます。