Playground

Playground · 30 demos

CSS Hero Sections Playground

Pick any demo to open it in a live, side-by-side editor. Tweak the HTML, CSS or JS and see your changes render instantly. Reset any time to return to the original.

Or browse the full CSS Hero Sections collection for the gallery view with code panels.

Centered Classic

The artisanal SaaS hero — eyebrow, serif headline, prose subhead, a single deep-terracotta primary CTA flanked by a quiet ghost button. Sage on warm cream, the small-batch tools-for-makers aesthetic.

Split with Mockup

Two-column hero with copy left, an SVG-painted dashboard mockup right. Rust red and ochre on deep brown — the heritage industrial / workshop aesthetic.

Tropical mesh gradient — overlapping radial blobs in mango, papaya, and dragon fruit on a warm coral base. The Stripe / Linear gradient hero, but turned up to a sunset.

Glass over Aurora

Frosted-glass card floating over a calm spa aurora — pale mint, champagne gold, soft rose. The wellness / luxury beauty editorial treatment.

Terminal Dev Hero

Vintage-CRT terminal hero — phosphor green text + amber prompt on a warm beige paper backdrop. The 1970s computing aesthetic for a modern dev tool.

Video Loop Hero

Memphis-modern video-pretender — geometric SVG shapes oscillating like a video loop, pinned behind cobalt-on-bone copy with a lemon CTA. No real video, no licensing.

Social Proof Hero

Mediterranean-tone social-proof hero — star rating pill above the headline, customer logo wall on warm cream, olive serif headlines with aubergine accents.

Animated Headline

1950s-diner animated headline — words lift into view with staggered delay, retro coral and ivory on jet black, neon-script CTA. Flips between two taglines on a loop.

Before/After Hero

Native <code><input type="range"></code> drives a CSS clip-path slider that wipes between a "before" desert scene and an "after" lush scene. Burnt orange + petrol blue + cream.

Sticky Scroll Cue

Tall full-bleed hero with a bouncing scroll indicator at the bottom. Forest emerald on birch with a soft yellow CTA — the cabin / retreat brand aesthetic.

Print-magazine cover treatment — issue stamp, oversized italic serif headline, vertical spine label, foil-stamped corner number. Plum and champagne on linen.

Asymmetric Type

Construction-site asymmetric typography — broken across columns with intentional misalignment, hi-vis safety yellow on concrete grey, black hard rules.

Oversized Number

Vintage wine-label poster — a massive faded burgundy "1924" set behind italic serif copy with gold-leaf accents on cream paper.

Marquee Headline

A single phrase scrolls horizontally on a loop with a counter-direction line beneath. Hot tangerine on chocolate brown — the streetwear / drop-culture treatment.

Photo Card Hero

Aesop / Apple-style full-bleed photo with copy in the bottom-left corner. Desaturated denim photograph painted in CSS, rust accent, linen card overlay.

Brutalist Text-Only

Raw Swiss-punk brutalist hero — pure black, traffic-cone orange highlight, acid lime accent, hard 8px offset shadows. No images, no soft anything.

Vertical Type Hero

Japanese traditional vertical typography — headline reads top-to-bottom using <code>writing-mode: vertical-rl</code>. Indigo on washi-paper white, vermillion seal stamp.

Kinetic Type Hero

Rave-poster kinetic typography — letters rotate, scale, and float individually using per-letter delay. Acid green and magenta on pure black with strobe-like accents.

Apple-style bento hero — one large headline tile with stat / quote / pill cells fanning around it. Matte-ceramic palette: salmon, terracotta, ivory, olive.

Gradient Text Spotlight

Oversized headline with an animated marigold → ruby → grape gradient sweeping across the letters. The Linear / Apple wordmark shimmer treatment.

Product Shot Hero

Apple-keynote product shot — a CSS-painted device front-and-centre with floating feature badges that pulse around it. Ice blue + chrome silver on warm white.

Price Card Hero

Heritage-banking pricing-led hero — copy left, single-tier brass-on-forest pricing card right. The 37signals-style "we have one price" treatment with a vintage finance feel.

iOS-pastel app-launch hero — three phone mockups fanned in lavender, soft pink, powder blue, with App Store and Google Play CTA pills below.

Tokyo-cyberpunk neon CTA — pure black backdrop, neon pink and electric cyan glows, single CTA that breathes with a soft pulse. The conversion-funnel pattern.

Parallax Mountain

Layered SVG mountain silhouettes drift at different speeds — glacier blue and pine on alpine snow. The outdoor / travel-brand parallax landscape.

Cozy WFH isometric — a CSS-painted desk + laptop + plant + lamp scene rendered with `transform: skewY()`. Mauve, dusty rose, and sage — the calm-productivity aesthetic.

Three luxury-cosmetics product cards in 3D perspective, fanning forward on hover. Champagne and soft blush on jet — the high-end beauty / fragrance treatment.

Particle Starfield

Pure-CSS starfield — dots positioned via radial-gradient on a deep-navy backdrop. Electric yellow accent and dim white copy. No canvas, no per-particle DOM.

Glitch Text Hero

VHS-glitch hero — RGB-channel offsets create a tape-static glitch effect. VHS red and tape blue against a static-gray background, the analogue cyberpunk treatment.

Conic Orbit Hero

Solar-corona conic gradient ring orbits the headline using <code>@property</code> animatable angle. Gold and ember orange on jet black — the AI / launch treatment with a stellar feel.