. Pure CSS Gold Foil Playing Card Effect – Free | Coodeverse Skip to main content

Gold Ace Poker Cards – Free Pure CSS Gold Foil Effect (No JavaScript, No Images)

Gold Ace Poker Cards is a free, copy-paste ready pure CSS gold foil playing card built with HTML, CSS, and SVG — zero JavaScript, zero image files. The 152×220px card uses a three-layer CSS background: linear-gradient(135deg, #2e2b32 81%, #1a1817 100%) base, radial-gradient ellipse top highlight, and a repeating-linear-gradient micro-texture pattern at 2px/7px intervals with 2% opacity — invisible alone but adding tactile depth when layered. isolation: isolate contains all blend modes within the card.

The gold foil is an SVG linearGradient (#gold-foil) with 6 color stops: #fffbe7 (0%) → #ffe9a6 (10%) → #ffdf85 (27%) → #ffdc52 (40%) → #e2c147 (75%) → #b89829 (100%). Applied via fill: url(#gold-foil) with mix-blend-mode: screen to make gold glow luminously over the dark card. The bevel filter (#bevel) chains feGaussianBlur(stdDeviation:1.2) → feSpecularLighting (surfaceScale:2, specularConstant:1.5, specularExponent:14, fePointLight x:70 y:-15 z:110) → feComposite(operator:in) → feMerge. The light source at y:-15 sits above the element, creating raised 3D-lit metallic edges.

What's Included in the Download

How the SVG Bevel Filter Creates Metallic Depth

The #bevel SVG filter creates a 3D-lit metallic appearance without any 3D transforms. The chain works: feGaussianBlur on SourceAlpha (stdDeviation:1.2) creates a soft shadow map of the shape edges. feSpecularLighting simulates a point light source hitting that surface — specularExponent:14 controls highlight sharpness (higher = tighter, more metallic highlights). The fePointLight at x:70 y:-15 z:110 places the virtual light above-right of the element; the negative Y value means the light comes from above. feComposite(operator:in) clips specular output to the original alpha mask so highlights don't bleed outside the shape. feMerge composites the original graphic and the specular layer together.

How the Animated Gloss Sweep Works

The .gloss div has an irregular border-radius: 42% 82% 50% 70% / 35% 85% 20% 135% — an organic blob shape that mimics natural light reflections on curved surfaces. Filled with a white gradient fading to transparent, it sits at opacity: 0.18 and z-index: 4. @keyframes glossmove sweeps the left property from -35% to 100% over 3.5 seconds, with opacity pulsing 0.12 → 0.22 at midpoint. The irregular shape combined with the smooth position sweep creates a convincing surface light reflection without any JavaScript or canvas.

Best Use Cases

Gold Ace Poker Cards is ideal for: casino and poker game UIs, luxury e-commerce product cards, premium membership displays, VIP event invitation pages, NFT showcase components, game menu card selection screens, CSS/SVG filter tutorials (feSpecularLighting, feMerge, mix-blend-mode), and any project requiring premium metallic UI without image assets.

License

Released under Creative Commons Attribution 4.0 International (CC BY 4.0). Free for personal and commercial use with attribution to Coodeverse.

Source Code

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hyper-Realistic Gold Ace Poker Cards</title> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet"> <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap'); body { background: radial-gradient(ellipse at 60% 20%, #201e28 70%, #111118 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; } .cards-row { display: flex; gap: 48px; margin: 70px 0; } .playing-card { width: 152px; height: 220px; background: linear-gradient(135deg, #2e2b32 81%, #1a1817 100%), radial-gradient(ellipse 160px 120px at 60% 5%, #353340 0%, transparent 80%), repeating-linear-gradient(130deg, rgba(255,255,255,0.02) 2px, rgba(120,120,120,0.09) 7px, transparent 13px, transparent 16px); border-radius: 17px; box-shadow: 0 10px 60px #000b, 0 0.5px 2.5px #fefefc13 inset; position: relative; font-family: 'Montserrat', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: hidden; border: 3.2px solid #202020; transition: box-shadow 0.3s, border 0.3s, transform 0.32s; isolation: isolate; } .playing-card:hover { box-shadow: 0 22px 66px #e2cd75bf, 0 42px 92px #ffefb250, 0 60px 160px -20px #cea74884; border: 3.2px solid #ecd679; transform: scale(1.065) rotate(-1deg); } .gloss { position: absolute; left: -24%; top: -20%; width: 158%; height: 80%; background: linear-gradient(112deg, #fff8 0%, #fff 55%, #fff3 81%, transparent 100%); border-radius: 42% 82% 50% 70% / 35% 85% 20% 135%; transform: rotate(7deg); opacity: 0.18; z-index: 4; animation: glossmove 3.5s infinite linear; } @keyframes glossmove { 0% {left:-35%; opacity:0.12;} 50% {left:30%; opacity:0.22;} 100% {left:100%; opacity:0.12;} } .gold { fill: url(#gold-foil); filter: url(#bevel) drop-shadow(0 2px 7px #fffbc498) drop-shadow(0 5px 20px #fffef87c); opacity: .98; mix-blend-mode: screen; animation: shimmer 3.1s linear infinite alternate; } @keyframes shimmer { 0% { filter: url(#bevel) brightness(1) drop-shadow(0 2px 6px #fffadbbf);} 48% { filter: url(#bevel) brightness(1.22) drop-shadow(0 14px 24px #ffe882e2);} 100% { filter: url(#bevel) brightness(1.11) drop-shadow(0 4px 19px #fff7f6b7);} } .card-corner, .card-corner-bot { position: absolute; display: flex; flex-direction: column; align-items: center; z-index: 9; } .card-corner { top: 13px; left: 17px; } .card-corner-bot { bottom: 13px; right: 17px; transform: rotate(180deg); } .ace { font-size: 1.25rem; font-weight: 700; color: #ffedb0; letter-spacing: 0.035em; text-shadow: 0 1.4px 2.3px #9b8146bb, 0 3px 9px #ddc3408c, 0 -1px 11px #e6d47d61; margin-bottom: 2px; z-index: 10; } .card-corner svg, .card-corner-bot svg { width: 20px; height: 20px; filter: drop-shadow(0 1.2px 7px #fffbe677); } .card-center { margin: 35px 0 36px; display: flex; align-items: center; justify-content: center; z-index: 6; } .playing-card::before { content:""; position:absolute; inset:0; z-index:2; background: repeating-radial-gradient(circle, rgba(255,255,255,0.01) 1px, transparent 6px, transparent 52px), radial-gradient(ellipse 60% 35% at 67% 9%, #fff9cd13 0%, transparent 100%); border-radius: inherit; pointer-events:none; } .playing-card::after { content: ""; position: absolute; left: 50%; bottom: -16px; width: 76%; height: 14%; transform: translateX(-50%); background: radial-gradient(ellipse, #221e17a2 39%, transparent 90%); z-index: 1; border-radius: 50%; filter: blur(2px); } </style>
</head>
<body> <svg width="0" height="0"> <linearGradient id="gold-foil" x1="0" y1="0" x2="1" y2="1"> <stop stop-color="#fffbe7" offset="0%"/> <stop stop-color="#ffe9a6" offset="10%"/> <stop stop-color="#ffdf85" offset="27%"/> <stop stop-color="#ffdc52" offset="40%"/> <stop stop-color="#e2c147" offset="75%"/> <stop stop-color="#b89829" offset="100%"/> </linearGradient> <filter id="bevel" x="-30%" y="-30%" width="160%" height="160%"> <feGaussianBlur in="SourceAlpha" stdDeviation="1.2" result="blur"/> <feSpecularLighting in="blur" surfaceScale="2" specularConstant="1.5" specularExponent="14" lighting-color="#fffbe6" result="specOut"> <fePointLight x="70" y="-15" z="110"/> </feSpecularLighting> <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/> <feMerge> <feMergeNode in="SourceGraphic"/> <feMergeNode in="specOut"/> </feMerge> </filter> </svg> <div class="cards-row"> <!-- Ace of Hearts --> <div class="playing-card"> <div class="gloss"></div> <div class="card-corner"> <div class="ace">A</div> <svg viewBox="0 0 40 40"><path class="gold" d="M20 33s-13-10.6-13-17.5C7 10.1 13 6.5 20 12.2 27 6.5 33 10.1 33 15.5c0 6.9-13 17.5-13 17.5z"/></svg> </div> <div class="card-center"> <svg viewBox="0 0 64 64" width="70" height="70"><path class="gold" d="M32 52s-20-15.3-20-25.6c0-8.7 7.7-12.5 20-2.4 12.3-10.1 20-6.3 20 2.4C52 36.7 32 52 32 52z"/></svg> </div> <div class="card-corner-bot"> <div class="ace">A</div> <svg viewBox="0 0 40 40"><path class="gold" d="M20 33s-13-10.6-13-17.5C7 10.1 13 6.5 20 12.2 27 6.5 33 10.1 33 15.5c0 6.9-13 17.5-13 17.5z"/></svg> </div> </div> <!-- Add other suits here if desired --> </div>
</body>
</html>

Frequently Asked Questions

Common questions about the free Gold Ace Poker Cards pure CSS gold foil effect project.

Yes — 100% free under Creative Commons Attribution 4.0. No sign-up, no payment, no JavaScript, no image files. Click Download Project and use it in casino UI, card games, luxury web designs, or commercial projects with attribution to Coodeverse.

Define an SVG linearGradient with 6 gold stops: #fffbe7 (0%), #ffe9a6 (10%), #ffdf85 (27%), #ffdc52 (40%), #e2c147 (75%), #b89829 (100%). Apply as fill: url(#gold-foil) on SVG paths. Add mix-blend-mode: screen to glow over dark backgrounds. Animate with @keyframes shimmer cycling filter: brightness(1) → brightness(1.22) over 3.1s to simulate light catching the foil.

Chain SVG filters: feGaussianBlur(SourceAlpha, stdDeviation:1.2) → feSpecularLighting(surfaceScale:2, specularConstant:1.5, specularExponent:14) with fePointLight(x:70, y:-15, z:110) — negative y places light above the element. feComposite(operator:in) clips highlights to the original shape. feMerge stacks SourceGraphic + specOut. The result: raised 3D-lit metallic edges without any 3D transforms.

Create a div with organic border-radius: 42% 82% 50% 70% / 35% 85% 20% 135% — an irregular blob mimicking natural light reflections. Fill with white gradient fading to transparent. Set opacity: 0.18. Animate with @keyframes glossmove: left sweeps from -35% to 100% over 3.5s linear infinite, with opacity pulsing 0.12 → 0.22 at midpoint. No JavaScript needed.

Stack multiple CSS background layers: linear-gradient base + radial-gradient top highlight + repeating-linear-gradient micro-texture. Use SVG path elements for suit symbols. Add box-shadow for depth and a ::before micro-texture overlay. Use ::after with filter: blur(2px) ellipse for table shadow. Set isolation: isolate to contain blend modes.

On :hover, apply layered gold box-shadow: 0 22px 66px rgba(226,205,117,0.75), 0 42px 92px rgba(255,239,178,0.31), 0 60px 160px -20px rgba(206,167,72,0.52). Change border to #ecd679. Add transform: scale(1.065) rotate(-1deg). Set base transition: box-shadow 0.3s, border 0.3s, transform 0.32s for smooth animation.

Browse coodeverse.com/projects — Luxury Business Card (gold CSS flip), Gold Circuit Board (pure CSS SVG), NEXUS 3D Pure CSS, LUNAR Luxury Fashion Landing Page, and more. All 100% free with complete source code.