Mesmerizing Hero Section Designs
48 free animated hero backgrounds. Get each one as an HTML file which you can copy, paste, and ship!
Browse them live on my website, pick your colo(u)rs, type your own headline and then copy the code: jefvandegraaf.com/resources/hero-designs/
Best of all, my hero animations stop for people who prefer reduced motion. That means better site experience, better PageSpeed scores, and better conversions (I hope)!
How to use 'em
- Open any file in
designs/ in your browser to see it.
- Change the colours in
--hl-acc and --hl-acc2 (RGB values) and the strength in --i. The comment at the top of each file says where.
- Swap in your own headline, supporting line and buttons. They're plain HTML.
- Paste it into your page: the
<style>, the <section> and the <script>. That's all it takes, baby!
Want to set the colours, light or dark, alignment, grain and speed with buttons instead? Do it on the live gallery and copy the result.
Gosh, it’s just that easy!
Let your AI do the work
Got an AI BFF? No problem!
You don't have to touch a line of code. Hand this file to your AI and tell it what you want just like a CEO does with their team of experts!
Claude. Paste a file into a chat and ask Claude to show it as an artifact. You get a live preview right there in the chat. Ask for changes ("make it my green", "slower", "put my headline in") and watch them happen, then copy the finished code. Wait, copy the finished code? Ha! Just ask your AI to SHIP the finished code!
That's right folks: HUMANS ARE OBSOLETE NOW!
Claude Code, Cursor, Copilot and other coding agents. Clone this repo, or drop one file into your project, and say something like "use design 13 as the hero on my homepage and match my fonts and colours". It will wire it in for you.
ChatGPT, Gemini and the rest. Paste the file and ask. Same idea.
Here's a hero section. Change the accent colour to #0f766e, use my headline
"Roofing that lasts 40 years", and link the buttons to /quote/ and /reviews/.
Turn this into a React component (or Next.js, Astro, Vue, Svelte). Keep the
animation and the reduced-motion part.
Turn this into one snippet I can paste into a Webflow Embed element
(or Framer, Squarespace, Wix, Shopify).
Here's my homepage CSS. Make this hero match my fonts, spacing and buttons.
I also offer 1001 Ultimate Claude Code Prompts here: github.com/jefvandegraaf/1001-ultimate-claude-code-prompts
Where can you use these incredible FREE hero section design ideas?
Anywhere that lets you add your own HTML:
| Platform | Where to paste it |
|---|
| Plain HTML, Cloudflare Pages, Netlify, GitHub Pages | Straight into your page |
| WordPress | A Custom HTML block |
| Webflow | An Embed element. Very long files may hit its size limit, so ask your AI to trim it |
| Framer | An Embed component set to HTML |
| Squarespace | A Code block |
| Wix | An Embed HTML element. It runs in a frame, so give it a fixed height |
| Shopify | A Custom Liquid section in the theme editor |
| Carrd | An Embed element |
| React, Next.js, Astro, Vue, Svelte | Ask your AI to turn it into a component |
They won't work in emails, because email apps don't run scripts.
What people use them for
- Landing pages for SaaS, apps and product launches
- Waitlist and coming-soon pages that need to look alive with almost no content
- Portfolios for designers, developers, writers and agencies
- Local business homepages that want to stand out from the template crowd
- Course, event and webinar pages
- Case study and article headers
- A 404 page with some personality
Not sure where to start? Match the family to your audience:
- Code & AI for developer tools and AI products
- Writing for copywriters, editors and blogs
- Data & charts for analytics, finance and SaaS dashboards
- Design tools for designers and agencies
- Japanese for restaurants, tea, craft and Japan-related brands
- ASCII for developer, gaming and retro brands
- Words for brands with a strong slogan or a few words they want people to remember
- Layout & grids for agencies, architects and anything technical
- Dither, Motion, Light & texture for anything that just needs to look good
Flipped a profit with one?
If you use these and flip a profit, be a good human and kick something back my way. You don't have to, no one will know anyway, but if you want more like this, send some love my way XD
This is the beginning of the README. Read the rest at the original. Read the full README ↗
