← All elements
<section class="hh"><h2>Design that <em>moves</em></h2><p>Small details, built with only CSS.</p><div><a class="p">Explore</a><a>Learn more</a></div></section>About this layout
A hero block with a two-tone headline, supporting line and paired buttons over a soft radial glow.
How it works
The headline uses a gradient text span with background-clip. A radial gradient glows at the top-right of the dark panel, and two pill buttons, one filled and one outlined, sit underneath.
Ways to customise it
- Change the headline words.
- Edit the gradient colours.
- Change the glow position.
Good to know
Gradient text must keep enough contrast against the background. Use a real h1 on a page and real links for the buttons.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.