GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

Y2K Web Design: 9 Chrome Holographic Sections

· Godrich · 9 items · 15 min read

Design trendsPage templateCSS onlyLanding pageHero sectionCTA

Y2K web design brings back the chrome shine of early-2000s CDs and holographic packaging, rebuilt in pure CSS.

One of the nine sections below puts that same holographic css shimmer on a spinning avatar ring rather than a card. Scroll through the assembled one-pager first — watch for where the chrome headline catches light and where it dims back down.

Open the full page

Each section is also broken out on its own below, arranged in a grid.

Chrome headline hero01 hero-chrome Brushed-metal nav02 nav-chrome Holographic foil cards03 card-grid-chrome Chrome ball icons04 feature-list-chrome Holographic highlighted plan05 pricing-chrome CD-ring avatar quote06 testimonial-chrome Brushed-aluminum CTA band07 cta-band-chrome Holographic hairline footer08 footer-chrome Chrome buttons, holographic focus09 buttons-inputs-chrome

Auto-plays · click a tile to jump to its section · all nine in one zip

The order isn't arbitrary. It follows the path a visitor actually takes down the page: notice it, check what it does, see the price, read what someone else has to say about it, then press the button. Strip the chrome off and keep only the hard right-angle shadow and you land on Neobrutalism UI Kit; push the same metal toward an instrument panel instead and you get HUD Interface Design.

01Chrome headline hero

What moves

The headline is clipped to a background-clip: text window, and a six-stop chrome gradient — white through cream, yellow, blue, orange, and back to white — slides across it by shifting only background-position.

Chrome headline hero
Open in a new tab

01 · Chrome headline hero — Measured area 1.539% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

background-clip: text다중 stop gradientbackground-position 스윕

In the code

No text color is painted directly; the gradient is the only source of color.

.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%; }
}

02Brushed-metal nav

What moves

The bar's background alternates ink tones to fake a brushed-metal surface, and a single thin white streak crosses it left to right by animating left.

Brushed-metal nav
Open in a new tab

02 · Brushed-metal nav — Measured area 9.886% · moving frames 22/23Original by GODRICH · SCSS and React ship in the zip · See the password

linear-gradient(100deg라인 스윕 하이라이트pill 인디케이터

In the code

The active link only gets a paler patch behind it — it doesn't move on its own.

.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%; } }

03Holographic foil cards

What moves

A diagonal foil band sits on top of the card surface with mix-blend-mode: overlay and slides across it as background-position shifts.

Holographic foil cards
Open in a new tab

03 · Holographic foil cards — Measured area 10.607% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

대각선 foil 스윕mix-blend-mode: overlayhover 승격

In the code

It's built to mimic the rainbow flash you get from tilting a real holo sticker — the card itself stays a fixed dark ink so the reflection reads clearly against it.

.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;
}

04Chrome ball icons

What moves

Each icon badge is a radial-gradient sphere with its highlight fixed toward the upper-left, like light hitting a small chrome ball.

Chrome ball icons
Open in a new tab

04 · Chrome ball icons — Measured area 1.75% · moving frames 7/23Original by GODRICH · SCSS and React ship in the zip · See the password

radial-gradient 구슬고정 하이라이트 점radius pill

In the code

Only that highlight's position drifts, and all three icons share one keyframes rule.

.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%; }
}

05Holographic highlighted plan

What moves

Only the recommended plan carries a five-stop gradient background that drifts across via background-position, making the pitch obvious without needing a comparison table.

Holographic highlighted plan
Open in a new tab

05 · Holographic highlighted plan — Measured area 15.662% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

background-position 이동다색 gradient강조 카드 확대

In the code

The other plan stays flat, matte gray for contrast.

.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-ring avatar quote

What moves

The avatar sits beside the quote card inside a conic-gradient ring that spins slowly, like the edge of a CD catching light.

CD-ring avatar quote
Open in a new tab

06 · CD-ring avatar quote — Measured area 0.397% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

conic-gradient 회전 링아바타 원형느린 회전

In the code

A mask cuts the gradient down to a thin donut so only the ring itself is visible.

.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); } }

07Brushed-aluminum CTA band

What moves

Two sets of translucent cream-and-white diagonal stripes drift across the full-width band via background-position, standing in for light catching brushed aluminum as it passes.

Brushed-aluminum CTA band
Open in a new tab

07 · Brushed-aluminum CTA band — Measured area 36.008% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

대각선 라이트 밴드background-position 애니메이션metallic 버튼

In the code

Since the whole band is the moving subject, this section has the largest changed-pixel area in the set, at 36.01%.

.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;
}

08Holographic hairline footer

What moves

A 3px line traces the footer's top edge, carrying a four-color gradient that drifts through background-position.

Holographic hairline footer
Open in a new tab

08 · Holographic hairline footer — Measured area 0.733% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

보더 그라디언트 라인shimmer 애니메이션4열→2열

In the code

It's the thinnest moving element in the set — its changed area is only 0.73%, one of the smallest of the nine — but the color contrast is sharp enough to read as a clear shimmer.

.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;
}

09Chrome buttons, holographic focus

What moves

Pressing the button flips its top highlight down to the bottom, mimicking the way light slides off real metal under pressure.

Chrome buttons, holographic focus
Open in a new tab

09 · Chrome buttons, holographic focus — Measured area 1.061% · moving frames 6/23Original by GODRICH · SCSS and React ship in the zip · See the password

box-shadow 반전press 하이라이트 플립focus glow 그라디언트

In the code

The input doesn't animate at all — it just carries a constant three-color box-shadow glow in blue, yellow, and orange.

.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);
}

Custom tailwind.config

One config file holds every color and radius the nine sections share, so retinting the palette here updates all of them at once — except for a single utility. backgroundImage.chrome repeats the same six hex values as literals instead of pulling from colors above, so changing a color there alone leaves that gradient stale. Update both spots together whenever the palette shifts.

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)",
    },
  },
},

Vibe-coding prompt

Paste the config in first, and from then on a short fragment is enough for Claude Code or Cursor to pick up the style. The complete prompt sits inside prompt.md in the zip.

Clip headline text with background-clip: text and slide a six-stop
white-cream-yellow-blue-orange-white gradient across it with a
background-position animation only.
Layer holographic bands onto card surfaces with mix-blend-mode: overlay,
only on ink-dark cards.
On press, flip the button's highlight from top to bottom.

Running this fragment against page/index.html and capturing the full page at a 1280px viewport produced the screenshot below.

result

Where it breaks (the trap)

y2k style web design — where does it break?

Chrome and holographic effects measure as motionless if the curve is too smooth. Building section 04's chrome ball icon with ease-out swinging back and forth first, the render measurement came back with an intensity of 14.6 — just 0.4 under the 15 needed to pass. Switching the timing to an 8-step steps(8, jump-none) and widening the travel distance pushed intensity up to 96.2 — motion needs to land in visible jumps, not a smooth blur, to register as motion at all. Section 06's CD-ring avatar hit a different trap: stacking the avatar above the quote card vertically overflowed the 320px-wide viewport (the measurement flagged it directly). Placing them side by side instead brought it back under the viewport with no scrollbar. How much of a chrome gradient survives once it has been pasted into an email body is checked separately in Marketing Email Design. The zip bundling all nine sections and the full one-page source needs the password hxqy3hr4 to open, and the button below starts the download right away.

The last trap is restraint. Turning on gradient, spin, and glow on every section at once doesn't read as shiny — it reads as noisy. Keeping the chrome effect to one or two focal sections, with everything else left flat and matte, is what makes the shine stand out at all.

Accessibility

What we checked

Every animated section — the highlight flip on the section 09 button included — is wrapped in the prefers-reduced-motion media query, documented at MDN's prefers-reduced-motion page, so a visitor with reduced motion enabled only ever sees a static gradient. Section 06's mask-composite ring follows MDN's mask-composite documentation and keeps the older -webkit-mask-composite fallback alongside the standard value. Outside the hero's chrome headline itself, headline and button text always sit as a bright color on ink or ink on a bright surface, never directly on the moving gradient, so contrast doesn't drift while the colors do.

Where to go next

If chrome isn't the trend you're after, the rest of the set lives in the design trends category, and the about page explains what this site covers.

FAQ

Can css chrome text and holographic effects be built with CSS alone?

Yes. None of the nine sections here use a single line of JavaScript. Even the press response on the section 09 button runs entirely on :hover and :focus-visible; the only script involved forces the animation to play while capturing the demo for the gif and mp4.

Does chrome gradient text show up in every browser?

background-clip: text has broad support in current browsers, but pairing it with the -webkit-background-clip prefix still matters for older Safari and some mobile browsers. Check current coverage on caniuse, and set a plain color fallback so text stays visible even where the clip isn't supported.

Can the holographic card effect work on a light background?

The gradient itself still works on a light background, but the mix-blend-mode: overlay foil band here assumes a dark ink card underneath for contrast. On a light background, switching the blend mode to multiply or soft-light and lowering the band's opacity keeps the text from losing contrast. Testimonial cards built to sit on that lighter ground are collected in Testimonial Section Design.

Enter the archive password

The password is inside this article. You will find it as you read.