{"id":"3b33172a-6928-4519-9756-fa7c737cfc87","name":"Confetti Birthday Card","slug":"confetti-birthday-card","category":"birthday-cards","description":"A joyful birthday card on a warm sunset gradient with hand-scattered CSS confetti, a bold age badge and room for a personal message — perfect for social shares, emails and greetings.","sample_params":{"age":"30","from":"The whole team","message":"Wishing you the happiest of days and an even brighter year ahead!","name":"Maya"},"spec":{"name":"confetti-birthday","width":1200,"height":630,"scale":2,"html":"\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cmeta charset='utf-8'\u003e\n\u003cstyle\u003e\n* { margin: 0; padding: 0; box-sizing: border-box; }\nbody { width: 100vw; height: 100vh; overflow: hidden; font-family: 'Avenir Next', 'Helvetica Neue', Arial, sans-serif; }\n.card { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 56px 96px; background: linear-gradient(140deg, #ff9a4d 0%, #ff6a6a 38%, #f4508c 72%, #c73aa0 100%); }\n.glow { position: absolute; z-index: 0; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(circle, rgba(255,236,190,0.45) 0%, rgba(255,236,190,0) 62%); top: -320px; left: 50%; transform: translateX(-50%); }\n.c { position: absolute; z-index: 1; border-radius: 3px; }\n.c.dot { border-radius: 50%; }\n.c.rib { border-radius: 999px; }\n.content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }\n.kicker { font-size: 26px; font-weight: 700; letter-spacing: 0.42em; text-transform: uppercase; color: rgba(255,255,255,0.92); text-shadow: 0 2px 10px rgba(120,20,80,0.25); }\n.name { margin-top: 10px; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 108px; line-height: 1.05; color: #fffdf7; text-shadow: 0 6px 24px rgba(120,20,80,0.35); max-width: 980px; overflow-wrap: break-word; }\n.age-row { margin-top: 26px; display: flex; align-items: center; gap: 22px; }\n.rule { width: 110px; height: 2px; background: rgba(255,255,255,0.55); border-radius: 2px; }\n.age { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 132px; height: 132px; border-radius: 50%; background: rgba(255,255,255,0.16); border: 3px solid rgba(255,255,255,0.85); box-shadow: 0 10px 30px rgba(120,20,80,0.3), inset 0 0 24px rgba(255,255,255,0.18); }\n.age .num { font-size: 56px; font-weight: 800; line-height: 1; color: #fffdf7; }\n.age .lbl { margin-top: 4px; font-size: 15px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.85); }\n.message { margin-top: 28px; font-size: 30px; line-height: 1.45; font-weight: 500; color: rgba(255,252,246,0.95); max-width: 860px; overflow-wrap: break-word; }\n.from { margin-top: 20px; font-family: Georgia, serif; font-style: italic; font-size: 24px; color: rgba(255,246,230,0.85); }\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class='card'\u003e\n  \u003cdiv class='glow'\u003e\u003c/div\u003e\n  \u003cdiv class='c' style='top:58px; left:96px; width:16px; height:26px; background:#ffd166; transform:rotate(-24deg);'\u003e\u003c/div\u003e\n  \u003cdiv class='c dot' style='top:150px; left:200px; width:14px; height:14px; background:#7ae7c7;'\u003e\u003c/div\u003e\n  \u003cdiv class='c' style='top:330px; left:70px; width:14px; height:22px; background:#fffdf7; transform:rotate(38deg);'\u003e\u003c/div\u003e\n  \u003cdiv class='c rib' style='top:470px; left:150px; width:34px; height:10px; background:#8cd3ff; transform:rotate(-30deg);'\u003e\u003c/div\u003e\n  \u003cdiv class='c dot' style='top:545px; left:270px; width:18px; height:18px; background:#ffd166;'\u003e\u003c/div\u003e\n  \u003cdiv class='c' style='top:240px; left:300px; width:12px; height:20px; background:#ffb4c6; transform:rotate(64deg);'\u003e\u003c/div\u003e\n  \u003cdiv class='c dot' style='top:70px; left:390px; width:10px; height:10px; background:#fffdf7;'\u003e\u003c/div\u003e\n  \u003cdiv class='c' style='top:540px; left:430px; width:16px; height:24px; background:#7ae7c7; transform:rotate(-52deg);'\u003e\u003c/div\u003e\n  \u003cdiv class='c rib' style='top:40px; left:560px; width:38px; height:10px; background:#ffd166; transform:rotate(18deg);'\u003e\u003c/div\u003e\n  \u003cdiv class='c dot' style='top:560px; left:640px; width:12px; height:12px; background:#8cd3ff;'\u003e\u003c/div\u003e\n  \u003cdiv class='c' style='top:90px; left:760px; width:14px; height:22px; background:#fffdf7; transform:rotate(-40deg);'\u003e\u003c/div\u003e\n  \u003cdiv class='c dot' style='top:520px; left:820px; width:16px; height:16px; background:#ffb4c6;'\u003e\u003c/div\u003e\n  \u003cdiv class='c' style='top:170px; left:920px; width:16px; height:26px; background:#7ae7c7; transform:rotate(30deg);'\u003e\u003c/div\u003e\n  \u003cdiv class='c rib' style='top:420px; left:990px; width:34px; height:10px; background:#ffd166; transform:rotate(48deg);'\u003e\u003c/div\u003e\n  \u003cdiv class='c dot' style='top:60px; left:1050px; width:14px; height:14px; background:#ffd166;'\u003e\u003c/div\u003e\n  \u003cdiv class='c' style='top:300px; left:1100px; width:14px; height:22px; background:#fffdf7; transform:rotate(-18deg);'\u003e\u003c/div\u003e\n  \u003cdiv class='c dot' style='top:520px; left:1120px; width:11px; height:11px; background:#7ae7c7;'\u003e\u003c/div\u003e\n  \u003cdiv class='c' style='top:590px; left:960px; width:12px; height:20px; background:#8cd3ff; transform:rotate(74deg);'\u003e\u003c/div\u003e\n  \u003cdiv class='c dot' style='top:390px; left:36px; width:12px; height:12px; background:#ffb4c6;'\u003e\u003c/div\u003e\n  \u003cdiv class='c' style='top:580px; left:60px; width:14px; height:22px; background:#ffd166; transform:rotate(12deg);'\u003e\u003c/div\u003e\n  \u003cdiv class='content'\u003e\n    \u003cdiv class='kicker'\u003eHappy Birthday\u003c/div\u003e\n    \u003cdiv class='name'\u003e{{.name}}\u003c/div\u003e\n    \u003cdiv class='age-row'\u003e\n      \u003cdiv class='rule'\u003e\u003c/div\u003e\n      \u003cdiv class='age'\u003e\u003cspan class='num'\u003e{{.age}}\u003c/span\u003e\u003cspan class='lbl'\u003eYears\u003c/span\u003e\u003c/div\u003e\n      \u003cdiv class='rule'\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class='message'\u003e{{.message}}\u003c/div\u003e\n    {{if .from}}\u003cdiv class='from'\u003eWith love, {{.from}}\u003c/div\u003e{{end}}\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"age":{"type":"number","required":true,"maxLen":3,"description":"Age they are turning, shown in the round badge."},"from":{"type":"string","maxLen":60,"description":"Optional sender name; rendered as 'With love, ...' when set."},"message":{"type":"string","default":"Wishing you the happiest of days!","maxLen":140,"description":"Short personal wish shown under the age badge."},"name":{"type":"string","required":true,"maxLen":40,"description":"Name of the birthday person, shown large in the center."}}}}