Fundamentals

Buttons Text & Typography Forms Navigation & UI Loading

Design & Visuals

Backgrounds Glass & Morphism Visual Effects Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Depth Cursors

Gallery & More

Cards & Layouts Gallery & Media Data & Visualization Atmosphere Utilities
All Effects New Favorites Templates Blog Tips ✨ Go Premium
CardsFree

Foil Shimmer

Three CSS layers clipped to text build holographic foil: iridescent rainbow gradient, metal grain, looping specular sweep. Hover speeds up the shimmer.

CSSTypographyHoverHolographic
FOIL ✦ PRO
Hover or click the scene to interact

This effect is free — the Cards category contains 41 effects total, including 6 free. Effect.Labs has 811 vanilla effects. Explore the category →

View in catalogue Free account

Usage examples

🎊

① Poster or credits — Film, album, or premium event title

WhenThe hero of a cinema, music, or fashion landing page where the main title must make a visual statement at first glance.
WhyAt large glyph sizes (4–6 rem), the specular sweep travels the full width of each letter and the rainbow iridescent becomes fully legible — the effect only reveals its richness on large text.
Settingsfont-size: 5rem, font-weight: 900, letter-spacing: 0.06em, background #000, --fsh-speed: 4.5s for a slow cinematic rhythm.
🏆

② Tier badge — "PRO" label on a pricing card

WhenPricing page or feature comparison table: the foil-border badge identifies the premium plan at a glance without a background color that might clash with the surrounding UI.
WhyThe pill variant (.fsh-pill) fits in 2 px of padding and border-radius: 20px — perfect for a compact badge (≈ 70 × 28 px) that does not compete with a CTA.
Settingsfont-size: 0.85rem, letter-spacing: 0.1em, .fsh-inner { background: #0f0c22 } to match the premium card background.
🚀

③ Luxury e-commerce hero — "Limited Edition" or collection launch title

WhenThe hero block of a capsule product page, collaboration, or limited drop where scarcity must be communicated before the user scrolls.
WhyThe metallic grain combined with gold–cyan–purple iridescent evokes physical hot-stamp foil that neither text-shadow nor a static image can replicate. The slow shimmer reinforces the luxury perception.
Settingsfont-size: 4rem, --fsh-speed: 5s (slow rhythm = sophistication), background #060610, uppercase text with letter-spacing: 0.08em.

How it works

The effect stacks three background-image layers on .fsh-text, all anchored to glyph shapes via background-clip: text and -webkit-text-fill-color: transparent. This replaces the text color with a background rendered inside the letter outlines — no canvas, no SVG.

The third layer (normal blend) is the iridescent gradient at 135° — gold → pink → silver → cyan → purple → silver → gold — spanning 300% width. The second layer (overlay blend) is a repeating-linear-gradient at 104° of metallic micro-hatching (white at 7% and gold at 4%, every 1–4 px) simulating metallized film grain. The first layer (screen blend) is the specular sweep: a translucent white bevel at 108° that travels across the text to produce the hot-stamp glint.

The fsh-pan animation translates background-position in an infinite linear loop across the iridescent gradient and the sweep, creating the illusion of light moving across a foil surface. Duration is controlled by the CSS variable --fsh-speed (default 3.2s), overridden to 0.7s on hover of .fsh-foil.

The pill variant adds a foil border via a linear-gradient background on .fsh-pill (2 px padding, border-radius: 20px), animated by fsh-pan-border. The inner .fsh-inner carries a dark background that exposes only the animated border.

Accessibility

  • prefers-reduced-motion is not handled in the provided code — the animation runs regardless of system preferences. Add @media (prefers-reduced-motion: reduce) { .fsh-text { animation: none; } } for motion-sensitive audiences.
  • Text stays in the normal DOM flow (<span>): screen readers parse the content without accessing the CSS background.
  • -webkit-text-fill-color: transparent cancels the browser's fallback text color. If background-clip: text is unsupported, text becomes invisible. Add color: gold (or any readable color) on .fsh-text as an explicit fallback.
  • The effect is purely decorative and acts only on hover speed — no information is conveyed by that state alone. Suitable for large headings, not functional text.
  • Contrast: on a very dark background (#000), the gold and white iridescent tones locally exceed 4.5:1, but WCAG measurement of animated multi-color text is complex. Reserve for large headings (≥ 1.5rem), never body copy.

Browser compatibility

Requires background-clip: text and background-blend-mode — supported in all modern browsers since 2016–2018. Zero JS, zero dependencies.

Chrome 63+✓ Full
Firefox 59+✓ Full
Safari 8+✓ Full
Edge 79+✓ Full
Mobile iOS✓ Full
Android Chrome✓ Full

Without background-clip: text, the gradient renders as a background behind the text (opaque colored text). Define color on .fsh-text to keep the text readable in that case.

The code

Copy the three blocks into your page. No dependencies.

HTML 
<div class="fsh-demo">
  <span class="fsh-foil">
    <span class="fsh-text fsh-big">FOIL</span>
  </span>
  <span class="fsh-pill">
    <span class="fsh-inner">
      <span class="fsh-foil">
        <span class="fsh-text">✦ PRO</span>
      </span>
    </span>
  </span>
</div>
CSS 
.fsh-demo  {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 18px;
   }

.fsh-foil  {
   display: inline-block;
   }

.fsh-text  {
   background-image: linear-gradient(108deg, transparent 30%, rgba(255, 255, 255, 0.5) 47%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.5) 53%, transparent 70%), repeating-linear-gradient(104deg, rgba(255, 255, 255, 0.07) 0px, rgba(255, 255, 255, 0.07) 1px, transparent 1px, transparent 3px, rgba(200, 175, 90, 0.04) 3px, rgba(200, 175, 90, 0.04) 4px, transparent 4px, transparent 6px), linear-gradient(135deg, rgb(255, 215, 0) 0%, rgb(255, 192, 203) 18%, rgb(232, 234, 240) 36%, rgb(0, 229, 255) 54%, rgb(199, 125, 255) 72%, rgb(232, 234, 240) 84%, rgb(255, 215, 0) 100%);
   background-size: 350% 100%, auto, 300% 100%;
   background-position: -120% 0px, 0px 0px, 0% 50%;
   background-blend-mode: screen, overlay, normal;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
   display: inline-block;
   font-weight: 900;
   animation: fsh-pan var(--fsh-speed, 3.2s) linear infinite;
   }

.fsh-big  {
   font-size: 3.2rem;
   letter-spacing: 0.04em;
   }

.fsh-foil:hover .fsh-text  {
   --fsh-speed: .7s;
   }

.fsh-pill  {
   display: inline-block;
   padding: 2px;
   border-radius: 20px;
   background: linear-gradient(135deg, rgb(255, 215, 0), rgb(255, 192, 203) 25%, rgb(0, 229, 255) 55%, rgb(199, 125, 255) 80%, rgb(255, 215, 0)) 0% 0% / 300% 100%;
   animation: 3.2s linear 0s infinite normal none running fsh-pan-border;
   }

@keyframes fsh-pan  {
   
  0%  {
   background-position: -120% 0px, 0px 0px, 0% 50%;
   }
  40%  {
   background-position: -120% 0px, 0px 0px, 120% 50%;
   }
  65%  {
   background-position: 270% 0px, 0px 0px, 195% 50%;
   }
  100%  {
   background-position: 270% 0px, 0px 0px, 300% 50%;
   }
}

@keyframes fsh-pan-border  {
   
  100%  {
   background-position: 300% 50%;
   }
}

.fsh-inner  {
   display: inline-block;
   background: rgb(16, 16, 24);
   border-radius: 18px;
   padding: 6px 14px;
   }

.fsh-pill .fsh-text  {
   font-size: 0.85rem;
   letter-spacing: 0.1em;
   }
JavaScript (fx-0822) 
// Effet CSS pur — pas de JavaScript nécessaire

Customize

Options passed to the API or data-* attributes:

Option / propertyDefaultEffect
--fsh-speed 3.2s CSS variable on .fsh-foil: duration of one full shimmer cycle. 5s = slow luxury, 1.5s = fast tech.
--fsh-speed (hover) 0.7s Accelerated speed on hover, defined in .fsh-foil:hover .fsh-text { --fsh-speed: .7s }. Adjust to control the hover intensity.
iridescent gradient (3rd layer) gold → pink → silver → cyan → purple Third background-image layer on .fsh-text. Replace color stops for a monochrome silver, brand, or full-spectrum rainbow palette.
font-size on .fsh-big 3.2rem Large text size. The foil is only fully visible from 1.5 rem; prefer 3 rem or more for headings.
background-size (1st value, sweep) 350% Width of the specular sweep. Increase (e.g. 500%) for a softer sweep; decrease (200%) for a more concentrated glint.
.fsh-inner background rgb(16,16,24) Inner background of the pill. Match your page background so only the foil border is visible.
border-radius on .fsh-pill 20px Pill corner radius. 20px = fully rounded; 6px = near-rectangular badge.

FAQ

The fsh-pan animation is missing from the code — how do I add it?

The @keyframes fsh-pan rule is absent from the provided snippet. Add it to your CSS: @keyframes fsh-pan { 0% { background-position: -120% 0, 0 0, 0% 50%; } 100% { background-position: 220% 0, 0 0, 300% 50%; } }. Without it, the shimmer stays static but the base foil look remains visible.

Can the effect be applied to any typeface?

Yes — but grain and iridescent are only clearly legible on wide glyphs. Prefer bold (700–900) or condensed serif fonts. Thin typefaces show only a fine iridescent line. Optimal results at 3 rem and font-weight: 900.

Does the effect work without JavaScript?

Yes — Foil Shimmer is 100% CSS. No JS is required for the shimmer or the animated foil border on the pill variant. It integrates directly into a static template, a CMS, or an HTML email that supports CSS animations.