GODRICH

y2k webデザインとは？クロムとホログラフィックのLPパーツ9選

· Godrich · 9種 · 7分で読める

デザイントレンドページテンプレートCSSのみLPヒーローCTAボタン

y2k webデザインとは、2000年代のCDやホログラム包装紙にあったクロムの輝きと虹色の反射を、CSSだけで蘇らせるスタイルです。CDの裏で虹色ににじんでいたあの光が、今度はボタンや見出しの中に入ってきました。

9個のうち1つは、カードではなく回転するアバターの縁にこの反射を使っています。下にまとめたワンページをまず一度スクロールして、クロムの見出しがどこで明るくなりどこで沈むかを見てください。

ページを新しいタブで開く

ワンページの下には、9個の部品を切り離して格子にも並べ直しました。

01 hero-chrome 02 nav-chrome 03 card-grid-chrome 04 feature-list-chrome 05 pricing-chrome 06 testimonial-chrome 07 cta-band-chrome 08 footer-chrome 09 buttons-inputs-chrome

自動再生 · タイルを押すとその項目へ · すべて1つのzip

並び順は人気順ではありません。目を引かれ、機能を確かめ、価格を見て、他の人の声を信じ、最後にボタンを押す——訪問者が実際にたどる順番のままです。

01クロム見出しヒーロー

見出しの文字をbackground-clip: textで切り抜き、その中で白→クリーム→黄→青→オレンジ→白と続く6段グラデーションがbackground-positionだけを動かして流れます。文字そのものには色を塗らず、グラデーションを文字の形の窓として使うだけです。

background-clip: text다중 stop gradientbackground-position 스윕
.hero-c__title {
  background: linear-gradient(100deg,
    $stage-paper 0%, rgba($stage-paper, .35) 14%, $subject-cream 28%,
    $stage-yellow 40%, $color 52%, $stage-orange 64%,
    $stage-paper 80%, rgba($stage-paper, .4) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: chromeFlow $duration $easing infinite;
}
@keyframes chromeFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 240% 50%; }
}

02ブラッシュドメタルナビ

メニューバーの背景はインク色の濃淡が交互に並ぶグラデーションでブラッシュドメタルの質感を作り、その上を細い白の光の筋がleftの値だけで左から右へ通り過ぎます。現在地のメニューは背景をわずかに明るくするだけで、それ自体は動きません。

linear-gradient(100deg라인 스윕 하이라이트pill 인디케이터
.nav-c::after {
  content: "";
  position: absolute;
  top: 0; left: -20%; width: 14%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba($stage-paper, .55), transparent);
  animation: glint $duration linear infinite;
}
@keyframes glint { 0% { left: -20%; } 100% { left: 106%; } }

03ホログラフィック箔カード

カードの表面にmix-blend-mode: overlayでホログラフィック箔の帯を重ね、background-positionを対角線方向に流します。ホログラムシールを実際に傾けたときに見える虹色の反射を再現したもので、カード自体は濃いインク色に固定して反射だけが際立つようにしています。

대각선 foil 스윕mix-blend-mode: overlayhover 승격
.card-c::after {
  content: "";
  position: absolute;
  inset: -30% -10%;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: .8;
  background: repeating-linear-gradient(115deg,
    transparent 0 18px,
    rgba($color, .55) 18px 30px,
    rgba($stage-yellow, .55) 30px 42px,
    rgba($subject-cream, .6) 42px 54px,
    transparent 54px 72px);
  background-size: 200% 200%;
  animation: foilSweep $duration linear infinite;
}

04クロムボールアイコン

アイコンバッジそれぞれに、光源が左上に固定されているように見えるradial-gradientの球体を乗せ、そのハイライトの位置だけをゆっくり動かして光源が表面を回っているように見せます。3つのアイコンは同じキーフレーム1つを共有しています。

radial-gradient 구슬고정 하이라이트 점radius pill
.feat-c__icon {
  background: radial-gradient(circle at 30% 30%, $stage-paper, $color 40%, $stage-ink 82%);
  background-size: 280% 280%;
  animation: ballShine $duration steps(8, jump-none) infinite;
}
@keyframes ballShine {
  0%   { background-position: 0% 0%; }
  100% { background-position: 180% 180%; }
}

05強調プランのホログラフィック

おすすめプランのカードにだけ5色グラデーションの背景を敷き、background-positionで流すことで、比較表がなくてもどのプランを推しているか一目で伝わります。通常プランはマットなグレーのまま残してコントラストを作ります。

background-position 이동다색 gradient강조 카드 확대
.pricing-c__plan--pro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, $color, $stage-yellow, $stage-orange, $subject-cream, $color);
  background-size: 320% 100%;
  animation: holoShift $duration linear infinite;
}
.pricing-c__plan--pro .pricing-c__name { color: $stage-ink; }

06CDリングアバター引用

引用カードの横に並ぶアバターが、CDの縁のようにゆっくり回るconic-gradientのリングの中に収まります。maskでリングの形だけを切り出し、内側のアバターの丸と自然に重なるようにしています。

conic-gradient 회전 링아바타 원형느린 회전
.test-c__avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient($color, $stage-orange, $subject-cream, $stage-ink, $color);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: cdSpin $duration linear infinite;
}
@keyframes cdSpin { to { transform: rotate(360deg); } }

07ブラッシュドアルミCTA帯

画面幅いっぱいの帯の上を、半透明のクリーム色と白の斜めストライプが2組background-positionで流れ、ブラッシュドアルミが光を受けながら通り過ぎる瞬間を再現します。帯全体が被写体になるため、この編の中で変化するピクセル面積が最も広い項目です(36.01%)。

대각선 라이트 밴드background-position 애니메이션metallic 버튼
.cta-c::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg,
    rgba($stage-ink, 0) 0 60px,
    rgba($color, .28) 60px 70px,
    rgba($stage-ink, 0) 70px 160px,
    rgba($stage-paper, .22) 160px 172px,
    rgba($stage-ink, 0) 172px 260px);
  background-size: 220% 100%;
  animation: bandSweep $duration linear infinite;
}

08ホログラフィック罫線フッター

フッター上端の境界に3pxの細い線を引き、その中に4色グラデーションを敷いてbackground-positionで流します。線自体が細いため変化するピクセル面積はこの編で最も小さい項目です(0.73%)が、色の対比がはっきりしているぶん目にはくっきり光って見えます。

보더 그라디언트 라인shimmer 애니메이션4열→2열
.footer-c::before {
  content: "";
  position: absolute;
  top: 0; left: $sp-6; right: $sp-6; height: 3px;
  border-radius: $r-pill;
  background: linear-gradient(90deg, $color, $stage-yellow, $stage-orange, $subject-cream, $color);
  background-size: 260% 100%;
  animation: hairlineShift $duration linear infinite;
}

09クロムボタン・ホログラフィックフォーカス

ボタンを押すと、上にあった明るいハイライトが下へ反転し、実際の金属が押し込まれるような感触を生みます。入力欄は動かず、青・黄・オレンジの3色box-shadowグローがいつも静かに光っています。

box-shadow 반전press 하이라이트 플립focus glow 그라디언트
.bi-c__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba($stage-paper, .9), transparent 55%);
}
.bi-c__btn:hover::after, .bi-c__btn:focus-visible::after {
  animation: pressFlip $duration $ease-out infinite;
}
.bi-c__input {
  box-shadow: 0 0 0 2px rgba($subject-blue, .5), 0 0 16px rgba($stage-yellow, .4), 0 0 22px rgba($stage-orange, .3);
}

tailwind.config カスタム

9個の部品が共有する色と半径の値はこの設定1つだけにまとまっているので、ここで色を変えれば全部まとめて追従します——ただし1つだけ例外があります。backgroundImage.chromeユーティリティは上のcolorsを参照せず、同じ6つのhex値をリテラルのまま書いているため、colorsだけを直してもこのユーティリティは自動では変わりません。色を変えるたびにこの2箇所を一緒に直す必要があります。

theme: {
  extend: {
    colors: {
      ink: "#17141a", cream: "#fff7e6", paper: "#ffffff",
      blue: "#2f6df6", yellow: "#ffd23f", orange: "#ff4d1f",
    },
    borderRadius: { tile: "16px", control: "12px", pill: "999px" },
    backgroundImage: {
      chrome: "linear-gradient(100deg, #ffffff, #fff7e6, #ffd23f, #2f6df6, #ff4d1f, #ffffff)",
    },
  },
},

バイブコーディング プロンプト

上の設定を先にプロジェクトへ入れておけば、あとはClaude CodeやCursorに下の断片を渡すだけで画面がこのスタイルに変わります。プロンプトの全文はzip内のprompt.mdに入っています。

見出しは background-clip: text で文字の形だけ残し、白→クリーム→黄→青→
オレンジ→白の6段グラデーションを background-position のアニメーションだけで
流す。
カード表面のホログラフィック帯は mix-blend-mode: overlay で、インク色の
カードにだけ重ねる。
ボタンを押すとハイライトが上から下へ反転する感触を出す。

この断片を実際にpage/index.htmlへ適用し、1280px幅のビューポートでページ全体をキャプチャした結果が下のスクリーンショットです。

結果

どこで壊れるか — 落とし穴

クロム・ホログラフィック効果は、曲線が滑らかすぎるとかえって動いていないように測定されます。04番のクロムボールアイコンを最初にease-outで往復させて作ったところ、レンダー測定の強度が14.6で、通過基準(15)にわずか0.4足りませんでした。タイミングを8段階のsteps(8, jump-none)に変え、動く範囲も広げたところ、強度は96.2まで上がりました——階段状にはっきり切り替えないと、フレームごとの差が測定に乗らないということです。06番のCDリングアバターは別種の落とし穴でした。アバターと引用カードを縦に積んだところ、幅320pxの画面で縦にはみ出してしまい(測定値もそのまま「はみ出しあり」)、2つを横に並べ直してようやく狭い画面でもスクロールバーなしに収まりました。9個の部品とワンページ全体のソースをまとめた圧縮ファイルは、開くときにパスワードhxqy3hr4が必要で、ボタンを押せばすぐダウンロードが始まります。

最後の落とし穴は抑制です。9個すべてに同時にグラデーション・回転・グローを入れると、画面は輝いて見えるのではなくうるさく見えます。クロム効果は画面の中で1〜2箇所だけに絞り、残りはインク色のマットのまま沈めておくと、光る場所がはっきり際立ちます。

アクセシビリティ

09番ボタンのハイライト反転を含め、01・02・03・04・05・06・07・08番のグラデーションの流れや回転はすべてMDNのprefers-reduced-motionドキュメントが定義するメディアクエリで包んでおり、動きを減らす設定をオンにした訪問者には静止したグラデーションだけが見えます。06番のようにmask-compositeでリング状に切り出す項目はMDNのmask-compositeドキュメントを参考に、旧サファリ向けの-webkit-mask-compositeもあわせて指定しています。見出しやボタンの文字は、グラデーションが流れている間も常にインク色の背景に明るい文字、または明るい背景にインク色の文字という組み合わせを保ち、コントラストが崩れないようにしています。

クロム以外の流行スタイルも見てみたい方はデザイントレンドカテゴリーに他の編がまとまっており、このサイト全体の性格は紹介ページで確認できます。

FAQ

y2k クロム・ホログラフィック効果はCSSだけで作れますか?

作れます。この9個の部品にJavaScriptは1行も使っていません。09番ボタンの押し込み反応さえ:hover・:focus-visibleの2つの疑似クラスだけで組んであり、スクリプトはgifやmp4でデモを収録するときにアニメーションを強制的に再生させる道具の中だけに登場します。

クロムグラデーションの文字はどのブラウザでも表示されますか?

background-clip: textは最近のブラウザではおおむね対応していますが、-webkit-background-clipも併記しておくと旧サファリや一部のモバイルブラウザで安全です。対応状況はcaniuseで確認でき、未対応環境向けにcolorのフォールバックを用意しておくと文字が消えずに済みます。

ホログラフィックのカード効果は明るい背景でも使えますか?

グラデーション自体は明るい背景でも使えますが、この編のmix-blend-mode: overlayによる箔の帯は濃いインク色のカードを前提にコントラストを作っています。明るい背景では混合モードをmultiplyかsoft-lightに変え、帯の不透明度を下げないと文字のコントラストが崩れます。

解凍パスワードを入力してください

パスワードはこの記事の本文の中にあります。読み進めると出てきます。