Get with licence Animated gradient hero section with a centred logo

Animated gradient hero section with a centred logo

Hero

Get with licence Gradient hero section with a big headline card

Gradient hero section with a big headline card

Hero

Get with licence Animated gradient hero background without text

Animated gradient hero background without text

Background

Get with licence Animated gradient background in cool infrared colours

Animated gradient background in cool infrared colours

Background

Get with licence Dark animated gradient hero background with a glowing face

Dark animated gradient hero background with a glowing face

Background

NewGet with licence AI startup website template with animated eye

AI startup website template with animated eye

Landing pages

NewGet with licence AI voice website template

AI voice website template

Landing pages

NewGet with licence Animated eye background

Animated eye background

Background

NewGet with licence

Eye close up animation

Background

NewGet with licence Silver eye animated background

Silver eye animated background

Background

NewGet with licence Purple eye animation background

Purple eye animation background

Background

NewGet with licence Green eye animated background

Green eye animated background

Background

NewGet with licence Pink eye animation background

Pink eye animation background

Background

NewGet with licence Blue eye animated background

Blue eye animated background

Background

Animated gradient hero templates for websites

Animated gradient hero templates for your website: a full screen hero gradient with your logo, a gradient hero card with a big headline, and three animated hero backgrounds with no text in warm, cool infrared and night colours. Each one is a hand and a face in profile drawn in the colours of a heat camera, live in the browser, so it moves, stays sharp and loads fast. Copy one into Lovable, Bolt, Cursor or Claude Code and swap in your words.

Looking for ideas first? See website design ideas, or give your AI tool a design system with DESIGN.md templates.

Frequently asked questions

What is a gradient hero?

A hero section, the first screen of a website, with a gradient behind the headline instead of a photo. An animated gradient hero moves slowly, which makes the first screen feel alive without a video.

What is a thermal gradient?

A gradient in the colours of a heat camera: deep blue and black for cool areas and red, orange, pink and yellow for warm ones. It gives a website a bold, editorial, photo-like look without a photo.

Are these images or videos?

Neither. Each scene is drawn live in the browser by one small shader, so it moves, never repeats, stays sharp at any size and weighs a few kilobytes.

Can I use them without text?

Yes. The animated gradient hero background, the infrared gradient animation and the heat map portrait have no text, so you can put your own headline on top or use them as full screen visuals.

How do I add one to my website?

Open a template, copy it and paste it into your page or your AI coding tool. It works in plain HTML, React, Next.js, Framer and code from Lovable, Bolt or Claude Code.

Narrow it down

Works with any vibe coding tool