CSS HOLOGRAPHIC FOIL CARD GENERATOR

Example output (default settings)

.holo-card {
  --mx: 50%;
  --my: 50%;
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  isolation: isolate;
  width: 280px;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  border-radius: 16px;
  background: #1b1a2e;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 150ms ease-out;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7);
}

/* Foil: stripes that slide as the cursor moves */
.holo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 70% 65%, #fff 0 1px, transparent 1.6px),
    repeating-linear-gradient(115deg, #ff5e8a 0%, #ffb347 5.83%, #f6f66a 11.67%, #5af09a 17.5%, #4cc9f0 23.33%, #8a7dff 29.17%, #ff5e8a 35%);
  background-size: 13px 13px, 17px 17px, 200% 200%;
  background-position: 0 0, 0 0, var(--mx) var(--my);
  mix-blend-mode: color-dodge;
  opacity: 0.6;
  filter: brightness(0.95) contrast(1.15);
  pointer-events: none;
}

/* Glare: a soft white spot under the cursor */
.holo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.08) 38%, transparent 65%);
  mix-blend-mode: overlay;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .holo-card {
    transform: none;
    transition: none;
  }
}

<div class="holo-card">
  <!-- card content -->
</div>

const card = document.querySelector(".holo-card");
const TILT = 12; // degrees at the card edge

card.addEventListener("pointermove", (e) => {
  const r = card.getBoundingClientRect();
  const x = (e.clientX - r.left) / r.width;
  const y = (e.clientY - r.top) / r.height;
  card.style.setProperty("--mx", x * 100 + "%");
  card.style.setProperty("--my", y * 100 + "%");
  card.style.setProperty("--ry", (x - 0.5) * 2 * TILT + "deg");
  card.style.setProperty("--rx", (0.5 - y) * 2 * TILT + "deg");
});

card.addEventListener("pointerleave", () => {
  ["--mx", "--my", "--rx", "--ry"].forEach((p) => card.style.removeProperty(p));
});

How to build a holographic card

1. 1

   Move the pointer over the preview card to see the foil shift and the card tilt. On a touch screen, drag across it.

2. 2

   Pick a preset (Rainbow holo, Aurora, Gold foil, Silver chrome, Sunset prism) or choose the foil palette and blend mode yourself.

3. 3

   Adjust the stripe angle, band width, foil intensity, glare, maximum tilt, corner radius and card width; switch the glitter dots on or off and set the card background colour.

4. 4

   Open the CSS, HTML and JS tabs and copy each one. Put your card content inside the .holo-card element.

5. 5

   Use Copy link to share the exact settings with someone else.

Questions

Why does a holographic card effect need JavaScript?

CSS can't read the cursor position. The foil and glare are positioned with the custom properties --mx and --my, and the tilt uses --rx and --ry. The small script this tool generates updates those four variables on pointermove and removes them on pointerleave, so the card returns to its resting state. All the visuals stay in CSS; without the script the card simply shows a static foil with no tilt.

How is the rainbow foil made?

A repeating-linear-gradient of the palette colours is drawn on a ::before layer that is twice the card's size and blended into the card with mix-blend-mode (color-dodge by default). Moving the background-position with the cursor makes the stripes slide, which reads as light catching a foil surface. The glare is a second layer, a radial-gradient centred on the cursor and blended with overlay.

Which blend mode should I use?

color-dodge gives the brightest, most saturated foil on dark card backgrounds. overlay and soft-light are gentler and keep the card artwork readable, which suits gold and silver. hard-light and screen sit in between, and hue tints the card with the foil colours while keeping its brightness. Dark card backgrounds work best, because blend modes can't brighten pure white.

Will it work on touch screens and with reduced motion?

The script uses pointer events, so a finger dragging across the card moves the foil the same way a mouse does; set touch-action: none on the card if the page scrolls instead. The generated CSS includes a prefers-reduced-motion rule that turns the tilt off for visitors who ask their system to reduce motion.

Can I put an image or text on the card?

Yes. Put an <img> or any markup inside the .holo-card element. The foil and glare are pseudo-elements on top of it with pointer-events: none, so the content shows through the blend and links inside stay clickable. A card with artwork looks best with a lower foil intensity (40–60%).

Related tools

• CSS 3D Tilt Card GeneratorBuild a card that tilts in 3D on hover with perspective and rotateX/rotateY, tune the angle and glare, and copy the CSS.
• CSS View Transitions GeneratorBuild View Transitions animations (crossfade, slide, cover, zoom, blur, wipe, circle reveal) with a live preview, and copy the CSS, HTML and startViewTransition script.
• CSS Flip Card GeneratorBuild a two-sided card that flips to reveal its back, with horizontal/vertical direction and a hover or click trigger, and copy the CSS.
• CSS Image Hover Overlay GeneratorBrowse zoom, dim-with-caption, slide-up caption, and icon-reveal hover overlays for images, and copy the CSS.
• CSS Button Hover Effects GeneratorBrowse a gallery of button hover effects — sweep, fill, shine, ripple, lift, and outline grow — and copy the CSS.
• CSS Link Underline Effects GeneratorBrowse a gallery of 10 hover underline effects for links — slide in, center out, double line, dot grow, and more.
• CSS Card GeneratorDesign a UI card — corner radius, padding, shadow intensity, colors, hover lift — and copy the CSS and HTML.
• CSS Tooltip GeneratorDesign a hover tooltip — position, colors, font size, corner radius, arrow — and copy the CSS and HTML.