Two dark heroes that get their depth from layered gradients rather than images. Mesh gradient hero is an AI assistant: four soft radial gradients in violet, cyan, pink and indigo sit behind a centred nav, an announcement pill, a headline with gradient text on its key phrase, two buttons, a trust line and an answer card that shows a question, an answer with a highlighted phrase and two source chips. Spotlight and grid hero is an edge database: a faint grid of lines fades out from a green spotlight in the corner, with the copy, two buttons and an install command on the left and a live metrics panel on the right holding three figures, a sparkline and three regions. On a near-black ground, light-theme colours turn muddy, so every colour here was checked against the lightest part of the gradient it sits on. The gradient headline only uses pale stops and has a solid fallback colour for browsers without background-clip: text. The Bootstrap version runs in Bootstrap’s dark colour mode with data-bs-theme=”dark”.
What’s included
Mesh background from layered radial gradients, no images
Gradient headline text with a solid colour fallback
Grid lines masked into a spotlight
Answer card and metrics panel described as images
Bootstrap version in data-bs-theme="dark"
Accessibility
Text colours were measured against the rendered gradients at desktop and phone widths and stay above 4.5:1. The answer card and metrics panel each have role="img" with a description, decorative icons are hidden from screen readers, and links show a 3px focus outline in the accent colour. Button transitions stop under prefers-reduced-motion.
Customise it
Change --dk-bg, --dk-muted and --dk-accent on .dk, and the four radial-gradient colours in .dk-mesh::before. In Tailwind the mesh is one arbitrary before:bg-[...] value, and the gradient text stops are in the bg-[linear-gradient(...)] class.
