Home / AI Era Interfaces / Holographic
Holographic CSS Template, Free with Live Demo
Free holographic card template with an iridescent rainbow shine that shifts as the card tilts under your cursor. Built for a festival pass. Live demo. The example is Nova Pass, a festival membership card.
What is holographic?
Holographic style copies the rainbow foil on trading cards and ID cards. As you tilt the card, the colors slide across it and a bright shine moves with your view.
The card tilts in 3D with CSS transforms. The rainbow is a wide gradient blended on top, and moving the mouse shifts its position, so the colors really seem to change with the angle.
Good for
- Membership and loyalty cards
- Event tickets and passes
- Collectible and gaming sites
- Premium product launches
What you get in this template
- 3D tilt that follows the cursor
- Rainbow foil layer that slides as you move
- Moving light spot on the surface
- CSS drawn gold chip
- Card resets smoothly when the cursor leaves
The key CSS
This is the part that makes the holographic look work. Copy it into your own project.
.card {
transform: rotateX(var(--rx)) rotateY(var(--ry));
transition: transform .15s ease-out;
}
.card::before {
content: ""; position: absolute; inset: 0;
mix-blend-mode: screen; opacity: .6;
background: linear-gradient(115deg, transparent 20%, #ff4fb4 30%, #3fe0ff 40%,
#7dff6a 50%, #ffd23f 60%, #9b6bff 70%, transparent 80%);
background-size: 250% 250%;
background-position: var(--mx) var(--my);
}How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
How do you make a holographic effect in CSS?
Layer a wide rainbow gradient over the card with a blend mode like screen, then change its background-position as the mouse moves. Add a 3D tilt for the full effect.
How does the 3D tilt work?
The parent has perspective set, and the card uses rotateX and rotateY with values based on where the cursor is over the card.
Will it work on phones?
The card shows the rainbow at rest on phones. The tilt reacts to touch and drag as well.
More AI Era Interfaces designs
031. Chat UI
Wayfarer, an AI travel assistant
032. AI Dashboard
Signalboard, an AI customer support dashboard
033. AI Glow Gradient
Quill, an AI writing assistant
034. Prompt Box Hero
Buildwell, an AI website builder
035. Node Workflow Canvas
Relay, an automation builder
036. Streaming Text
Recap, an AI meeting notes tool
037. Terminal Developer
shipit, a command line deploy tool
038. Linear Style Minimal
Tracklet, an issue tracker