{"id":"c1aae2f9-973a-48b3-b497-991c56c34d74","name":"Slim Gradient Footer","slug":"slim-gradient-footer","category":"email-footers","description":"A wide, slim email footer banner with your company name, tagline and a call-to-action pill on a rich gradient — a polished sign-off for every newsletter and transactional email.","sample_params":{"company":"Northwind Analytics","cta":"Start free trial →","hue":"244","tagline":"Dashboards your whole team actually reads."},"spec":{"name":"slim-gradient-footer","width":1200,"height":220,"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; }\n  html, body { width: 100vw; height: 100vh; overflow: hidden; }\n  .banner {\n    width: 100vw; height: 100vh;\n    position: relative;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 0 64px;\n    background:\n      radial-gradient(900px 420px at 88% -60%, hsla(var(--h), 90%, 72%, 0.45), transparent 65%),\n      radial-gradient(700px 380px at 8% 160%, hsla(calc(var(--h) + 40), 85%, 60%, 0.35), transparent 60%),\n      linear-gradient(115deg, hsl(var(--h), 45%, 13%) 0%, hsl(calc(var(--h) + 18), 52%, 20%) 100%);\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n    overflow: hidden;\n  }\n  .banner::before {\n    content: ''; position: absolute; inset: 0; z-index: 0;\n    background-image: radial-gradient(hsla(0, 0%, 100%, 0.10) 1px, transparent 1px);\n    background-size: 26px 26px;\n    mask-image: linear-gradient(to right, transparent 30%, black 100%);\n    -webkit-mask-image: linear-gradient(to right, transparent 30%, black 100%);\n  }\n  .banner::after {\n    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 2;\n    background: linear-gradient(90deg, hsl(var(--h), 95%, 68%), hsl(calc(var(--h) + 60), 90%, 62%));\n  }\n  .left { position: relative; z-index: 1; min-width: 0; padding-right: 48px; }\n  .company {\n    font-size: 44px; font-weight: 800; letter-spacing: -0.02em;\n    color: #ffffff; line-height: 1.1;\n    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n  }\n  .tagline {\n    margin-top: 10px; font-size: 22px; font-weight: 400; line-height: 1.35;\n    color: hsla(var(--h), 40%, 88%, 0.85);\n    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;\n  }\n  .cta {\n    position: relative; z-index: 1; flex: none;\n    display: inline-flex; align-items: center;\n    padding: 20px 40px; border-radius: 999px;\n    font-size: 24px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;\n    color: hsl(var(--h), 50%, 14%);\n    background: linear-gradient(180deg, #ffffff 0%, hsl(var(--h), 60%, 92%) 100%);\n    box-shadow: 0 8px 28px hsla(var(--h), 80%, 30%, 0.55), inset 0 1px 0 #ffffff;\n  }\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class='banner' style='--h: {{.hue}}'\u003e\n  \u003cdiv class='left'\u003e\n    \u003cdiv class='company'\u003e{{.company}}\u003c/div\u003e\n    \u003cdiv class='tagline'\u003e{{.tagline}}\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cspan class='cta'\u003e{{.cta}}\u003c/span\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"company":{"type":"string","required":true,"maxLen":60,"description":"Company or product name shown as the footer headline."},"cta":{"type":"string","default":"Learn more →","maxLen":40,"description":"Label of the call-to-action pill on the right."},"hue":{"type":"number","default":"244","maxLen":6,"description":"Base hue (0-360) of the gradient; 244 is indigo."},"tagline":{"type":"string","maxLen":140,"description":"Short supporting line under the company name."}}}}