About the Gradient template
A pure black canvas holds animated color gradients that shift and morph with glassmorphism, creating depth through color physics and mathematics. Each interaction reveals new chromatic gradients flowing beneath transparent surfaces. As a Pro-exclusive template, pair custom domains with these flowing colors to brand your entire gradient identity.
What the demo shows
The live demo on this page launches Tintbox, a made-up product we wrote to show the template with realistic copy: the headline reads “Gradients that don't look like 2016” and the subhead says “Tintbox generates smooth, perceptually even gradients from any photo and exports them as ready-to-paste CSS variables.” Below it you see the signup form, a demo launch countdown and the share-to-climb referral panel exactly as a visitor would. Try the form: in the demo nothing is stored. When you use Gradient, you replace Tintbox with your own product name, headline, subhead and logo; the palette and motion come with it and every colour stays editable.
Design details
Gradient is a dark template: a near-black background (#000000), white type (#ffffff) and a vivid pink accent (#ec4899) on the join button, the countdown and the referral highlights. Body text sits at a 21:1 contrast ratio against the background, comfortably past the WCAG AAA threshold. Behind the copy the page animates with slow-morphing gradient blobs, front and centre; visitors who ask their device for reduced motion get a still frame instead. The layout is hand-built for Gradient and not shared with any other template in the catalogue.
- Background
- #000000
- Accent
- #ec4899
- Text
- #ffffff
How it compares
Within Essentials, Gradient stands out for its vivid pink accent on a near-black ground. If it is not quite right, Minimal is also dark but leans on an indigo accent and slow-morphing gradient blobs (“Clean, centered, focus-on-the-form”). Bold flips to a light cream canvas with a vivid orange accent and Bauhaus circles, squares and bars (“Massive typography, split layout”). Clean Canvas flips to a light white canvas with a near-black accent and watercolour washes bleeding together (“Off-white, single CTA, zero noise”). All of them share the same signup, referral and analytics features, so switching later only changes the look.
Launch with Gradient in three steps
- Click “Use this template” and create a free account; Gradient is preselected in the page wizard.
- Replace the Tintbox demo copy with your product's headline and one-line pitch, pick a URL, and optionally set a launch date to show a real countdown.
- Publish and share the link. Every subscriber gets a personal referral link, and you watch signups and top referrers arrive in the dashboard.
