47 hero backgrounds you can try on this page. Type your own headline, switch between light and dark, pick your colours, then copy the code or an AI prompt into your own project. Five are free.
Each design shows its own example copy. Type yours here and it goes into every preview and into the code you copy.
Hairlines that frame the page
Rails mark the edges of the content column, with plus marks where the lines cross and a hatched band under the header. Every option above is plain CSS.
A glow made of pixels
Accent pixels rise from the bottom edge in an ordered dither, with a smaller grey patch in the top left. Drawn once, so it costs nothing after the page loads.
A grid that follows the cursor
Small plus marks brighten around the mouse and the closest ones take the accent colour. On phones the light drifts on its own.
Copy that sits on the lines
Notebook rules are spaced to this paragraph’s line height, with a double margin rule on the left and punch holes on wide screens.
Dots from the printing press
Halftone dots grow toward the top right corner like a newspaper photo, then fade out behind the copy. Drawn once.
Like what you see? Get the code and the AI prompt for all 47 designs, plus every new one I make, from $5.
Unlock everything from $5All 47 unlockedPixels that chase the mouse
Accent pixels gather around the cursor and leave a short trail that thins out behind it. When the mouse rests, the glow drifts on its own.
A glow that breathes
The bottom glow rises and falls over nine seconds while a small core breathes the other way, one pixel at a time.
The dither in your second colour
The same ordered pixels in the second accent colour, with a seam of the main accent along the bottom edge.
A frame that looks printed
Dithered edges on all four sides, with the bottom edge in the accent colour. The widths wander a little, so it never looks ruled.
End every section on a glow
Film grain with a fire-coloured line along the bottom edge and a slow glow rising from it.
Colour that never sits still
Soft fields in your two accent colours drift slowly behind the section, like a gradient mesh.
A dot matrix in a slow wave
Rows of dots swell and shrink as a wave rolls through them. The crests light up in the accent colour.
An old monitor, still warm
Scanlines, a rolling band and a soft phosphor glow sit under the copy, which stays sharp on top.
Ink that drifts at the edges
Slow, soft ink clouds curl around the section and keep clear of the copy.
Ink that follows your hand
Move the mouse and the ink moves with it, leaving a short trail in the accent colour. Leave it alone and an invisible brush stirs it.
Strands on an invisible wind
Hundreds of thin lines drift along a flow field and leave fading trails. A few of them carry the accent colour.
Field lines you can push around
Iron filings line up between two magnets. Move the mouse and it becomes a third magnet that bends every line near it.
Points that find each other
Drifting points link up when they get close. Move the mouse and the nearest ones connect to it.
Found one you want? Get the code and the AI prompt for all 47 designs, plus every new one I make, from $5.
Unlock everything from $5All 47 unlockedA sun drawn in characters
Text characters build a sun rising from the bottom edge, with scan bands rolling through it.
A sea typed out in characters
Rows of characters roll like waves along the bottom of the section, with the crests in the accent colour.
A fire made of characters
Text characters flicker and rise like flames from the bottom edge, hottest at the base.
One word in the background
A giant outlined word sits behind the hero and shifts a little as you scroll past it.
The highlighter does the talking
Faint words sit around the hero. When the section scrolls into view, highlighter strokes sweep in behind three of them.
Words on a slow conveyor
Three rows of faint words scroll in opposite directions above the headline and under the buttons, fading out at the sides.
Big type rolling along the bottom
Huge outlined words scroll slowly in two rows going opposite ways.
A blueprint under the cursor
A measured grid only shows up where the mouse is, with live coordinates beside it. When the mouse rests, the spotlight wanders.
Light running along the grid
Pulses travel across and down a faint grid and slip behind the copy.
Want the whole set? Get the code and the AI prompt for all 47 designs, plus every new one I make, from $5.
Unlock everything from $5All 47 unlockedThe hero, seen from the editor
Line numbers, change markers and indent guides from a code editor, with a caret stepping through the hero’s own HTML.
An AI session typing itself out
A coding assistant takes a request, lists the files it touches and reports back, then starts on the next one.
Old blocks, swept clean
Page-builder blocks with dashed outlines and update badges get swept away by a line that leaves tidy, grid-snapped blocks behind.
Type with its guides showing
Cap height, x-height and baseline are measured from this headline, so the guides follow the type at every screen width.
A field of letters with words inside
Characters gather at the edges and thin out behind the copy. Every few seconds a word scrambles into place, then dissolves.
Marked up by a copyeditor
Proofreading marks draw themselves in when the section scrolls into view: insert, delete, transpose, stet, new paragraph.
Five headlines, one winner
Rejected drafts stack beside the copy and get struck through one by one, until only the winner is left highlighted.
Straight off the design canvas
A dotted canvas with phone, tablet and desktop artboards peeking in, and a live selection box around this headline.
Curves that reshape while you read
Bézier curves with anchor points cross the section. One is selected, and its handles drift slowly.
Every gap, measured
A handoff spec drawn over the hero shows the real spacing between each element in pixels, measured live.
Like what you see? Get the code and the AI prompt for all 47 designs, plus every new one I make, from $5.
Unlock everything from $5All 47 unlockedWhere the eyes go first
An eye-tracking heatmap measured from this hero: hot at the start of the headline, cooler down the copy, with clicks on the main button.
A heartbeat and 90 days of uptime
A pulse runs along a heartbeat line above a status strip of daily uptime bars.
Up and to the right
Chart paper with a twelve-month line that draws itself when the section scrolls into view. The last point pulses.
Your spot on the map
Contour lines with a few location pins. One pin sends out search-radius rings.
Written on manuscript paper
Columns of squares read top to bottom, right to left, with a line of Japanese set one character per square.
Signed with a name seal
Three columns of vertical Japanese end in a hanko reading ジェフ, the way a writer signs a page.
One stroke, one circle
A brush circle paints itself in a single stroke and breaks into dry bristle marks where the brush lifts.
Waves from old Japanese cloth
The overlapping wave pattern rises from the bottom edge, with one wave in the accent colour.
A star pattern cut from wood
The hemp-leaf pattern from kimono and kumiko woodwork gathers on the right and fades toward the copy.
Copy in an open doorway
Paper-screen lattice fills the side panels and fades toward the middle, so the copy sits in the opening.
Five are free. Pay what you want, from $5, to unlock the other 42 and every hero design I add later. The code comes out with your headline, colours and settings already in it.
Unlock everything from $5Everything is unlockedAll 47 designs are free to play with on this page. Five of them, Dither Glow, Frame Rails, Plus Grid, Ruled Pad and Halftone, also come with the full code and the AI prompt at no cost.
Pay what you want, from $5. One payment unlocks the code and the AI prompt for every design on this page, plus every hero design I add later. It’s not a subscription.
Paste it into Claude Code, Cursor, ChatGPT or any other coding assistant. The prompt includes the code and tells the assistant to fit the hero into your framework, swap in your header, buttons, colours and font, and keep it accessible.
Yes. The code is plain HTML, CSS and vanilla JavaScript, so it runs on any site. The prompt asks your assistant to port it to your setup, including cleanup for component frameworks.
Yes. Use them on your own sites and on sites you build for clients. Please don’t resell them or share the code as a template pack.
Most designs draw once or animate on a small canvas. They pause when they scroll out of view and stand still for visitors who turn on reduced motion in their settings.
Right after checkout you get an unlock link. Open it on any device to unlock everything there too. Lost it? Email hello@jefvandegraaf.com with your Stripe receipt and I’ll send it again.
Letters from a Copywriter
Honest letters on words, selling, and staying human in the AI era.
All letters are written by my human hands. You can unsubscribe anytime.