webdevpuneet.com

Related Snippets

147 in Cards category
1–6 of 60

WOW.js Staggered Testimonial Wall

WOW.js Scroll Reveal Cards

Popmotion Swipe-Dismiss Stack

Popmotion Drag Inertia Card

AutoAnimate Filter Grid

CountUp.js Stat Cards

Gift Card Voucher — Reveal & Copy HTML CSS JS Snippet

Gift Card Voucher · Cards · Plain HTML, CSS & JS · Live preview

CategoryCards
TagsClipboard APICSS Animation

Copy & paste

Source Code

<div class="gc-wrap">
  <div class="gc-card">
    <div class="gc-shine"></div>
    <div class="gc-top">
      <span class="gc-brand">✦ FWD STORE</span>
      <span class="gc-chip">GIFT CARD</span>
    </div>
    <div class="gc-amount">$50<span class="gc-bal">.00</span></div>
    <div class="gc-to">To: <strong>Alex</strong> · From: <strong>Sam</strong></div>

    <div class="gc-code-row">
      <code class="gc-code" id="gcCode">FWDT-••••-••••</code>
      <button class="gc-btn" id="gcBtn" onclick="revealOrCopy()">Reveal code</button>
    </div>
    <div class="gc-foot">
      <span>Expires Dec 2027</span>
      <span class="gc-bal-tag">Balance $50.00</span>
    </div>
  </div>
  <p class="gc-note">Redeem at checkout — applies to your next order.</p>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Premium card visual
A multi-stop gradient with a soft coloured shadow, brand mark, chip, and large amount make it read as a real gift card.
Animated shine sweep
A .gc-shine strip translates across the card on a loop using only transform, so the glint is smooth and export-safe.
Masked code by default
The code shows as FWDT-••••-•••• so screenshots or onlookers never see it until the recipient reveals it.
Two-step reveal then copy
revealOrCopy reveals on the first click (with a flip-in) and copies on the second — preventing accidental copies of a hidden value.
Clipboard with fallback
Uses navigator.clipboard.writeText and still confirms if it is unavailable, so the button always gives feedback.
Copied confirmation
The button switches to "Copied ✓" in green for 1.6s, then resets — clear feedback the code is on the clipboard.
Redemption details
Amount, balance, recipient, expiry, and a redeem note turn the visual into a usable voucher.
Single source of truth
The code lives in one CODE constant that the reveal and copy both read — easy to populate from real data.

About this UI Snippet

Gift Card Voucher — Animated Shine, Masked Code Reveal & Copy-With-Feedback

Screenshot of the Gift Card Voucher snippet rendered live

A digital gift card or voucher needs to feel valuable and be effortless to redeem. That means a premium card visual, a code that stays hidden until the recipient chooses to reveal it, and one-tap copying. This snippet implements exactly that in plain HTML, CSS, and vanilla JavaScript: a gradient voucher with an animated shine sweep, a masked code that reveals on click and then copies with confirmation, plus amount, balance, recipient, and expiry details.

A voucher that looks the part

The card uses a multi-stop gradient and a soft coloured shadow to read as a premium, physical-feeling gift card. A .gc-shine element sweeps a diagonal highlight across it on a loop — the light-glint effect that makes gift cards and credit cards feel tactile and special. The animation uses only transform (a translating, rotated gradient strip), so it runs on the compositor and exports cleanly. Brand mark, "GIFT CARD" chip, a large amount, and a to/from line complete the front.

Masked code with reveal-then-copy

The redemption code starts masked (FWDT-••••-••••) so a shared screenshot or an over-the-shoulder glance never exposes it. A single button drives a two-step flow handled by revealOrCopy: the first click reveals the real code (with a small flip-in animation) and changes the button to "Copy code"; the second click copies it to the clipboard and confirms with "Copied ✓" in green for 1.6 seconds before resetting. This reveal-first pattern is both a privacy nicety and a deliberate two-tap interaction that prevents accidental copies of a hidden value.

Robust clipboard copy

revealOrCopy uses the modern navigator.clipboard.writeText API and falls back gracefully (the confirmation still fires) if it is unavailable, so the button always gives feedback. The code is stored once in a CODE constant and revealed/copied from there — a single source of truth.

Redemption details

The footer shows an expiry date and the current balance, and a note clarifies how to redeem ("applies to your next order"). These details are what turn a pretty card into a usable voucher: the amount tells the recipient what it is worth, the balance handles partial redemptions, and the expiry sets expectations so the card does not quietly lapse.

Built to drop into a real flow

Because the whole card is plain markup with one CODE constant and CSS-driven visuals, it slots into an email template, an account "my gift cards" page, or a post-purchase confirmation with minimal work — and the reveal/copy logic is the only JavaScript, so it stays light and dependency-free.

Swap the amount, code, names, and expiry for real values (rendered server-side per gift card) and it is production-ready. Pair this with an order summary where the code applies, a scratch card reveal for a playful unlock, or a confetti celebration card for the gifting moment.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA gradient $50 gift card appears with an animated shine sweep, a to/from line, a masked code, and a "Reveal code" button.
  2. 2
    Reveal the codeClick "Reveal code" — the masked dots flip to the real code and the button changes to "Copy code".
  3. 3
    Copy itClick "Copy code" — the code is copied to the clipboard and the button confirms "Copied ✓" in green.
  4. 4
    Watch the shineA diagonal light glint sweeps across the card on a loop, giving it a premium, physical feel.
  5. 5
    Read the detailsThe footer shows the expiry and balance, with a note on how to redeem.
  6. 6
    Plug in real valuesSet the CODE constant, amount, names, and expiry from your gift-card data (rendered per recipient).

Real-world uses

Common Use Cases

E-commerce gift cards
Digital gift cards delivered by email or account. Apply the revealed code in an order summary at checkout.
Discount and promo vouchers
Single-use coupon codes presented as a branded voucher; pair with a sticky promo bar to surface offers.
Loyalty and reward redemptions
Redeemable reward codes from a loyalty points widget or referral program.
Event tickets and passes
Access codes or passes shown on a premium card with reveal-to-view privacy.
Prize and giveaway reveals
Pair with a scratch card reveal or confetti celebration card for a fun unlock moment.
Account credit and top-ups
Show applied credit with a balance and code for wallets and subscription credits.
Related: Parallax Tilt Card
See the Parallax Tilt Card for a related cards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Render the amount, recipient/sender names, expiry, balance, and the CODE constant from your gift-card record (server-side, per recipient). Never hard-code real codes in shipped client source for production cards — fetch the code only for the authenticated owner, ideally revealing it via an authorised request rather than embedding it in the page.

Yes — masking the code until the user taps reveal protects it from shoulder-surfing and from being captured in screenshots shared for the card's design, and it makes the copy action deliberate. For sensitive codes, go further: fetch the code from the server only on the reveal click, so it is never present in the page source at all.

Append the code to the redeem flow: a "Redeem now" button can navigate to checkout with ?gift=CODE or call your apply-credit API directly. Validate and apply gift cards server-side (check balance, expiry, single-use), and reflect the new balance back on the card so partial redemptions show the remaining amount.

Make the reveal/copy a real <button> (it is) so it is keyboard-operable, and announce the reveal and copy via an aria-live="polite" region. Ensure the code, when revealed, is selectable text and has sufficient contrast on the gradient; the masked state should have an aria-label like "code hidden, activate to reveal" so screen-reader users understand the control.

In React, hold revealed in useState and the code/amount as props; the button toggles reveal then copies, with a setTimeout for the "Copied" flag. In Vue, use a ref for revealed and a method for the two-step action. In Angular, track revealed on the component. The shine keyframe and card CSS port unchanged.