Toggle menu

Free Hero Backgrounds

10 background images made for hero sections, OG covers and app screens. Each comes with its color palette, a text-safe area and crop notes, so you can drop it in without guessing. Free for commercial use, no sign-up.

Full size JPG + WebP 1600 and 6405-color palette per imageFree commercial license
Hand-painted look of green clifftops with wildflowers above a turquoise sea. Big open blue sky with a few clouds at the edges.
Text color

Tip: use the arrow buttons, swipe, or the left and right arrow keys to switch images. The URL updates, so you can share the exact image.

All backgrounds

How to use them in a hero section

Every image keeps its subject in the bottom part and leaves calm space at the top for your headline. Set it as a CSS background, anchor it low, and the subject stays in frame from phone to wide screen. Copy CSS above gives you this with the exact position you picked.

.hero {
  min-height: 70vh;
  background: url("/img/coastal-cliffs-1600.webp")
    center 85% / cover no-repeat;
  color: #0B3A5B;
}
@media (max-width: 640px) {
  .hero { background-image:
    url("/img/coastal-cliffs-640.webp"); }
}

What the crop data means

  • Subject area (orange): the part of the image that carries it. Keep it in frame when you crop. Most crops fail by cutting this off.
  • Text area (blue): low detail and steady color, so text stays readable. Put your headline and buttons here.
  • Position: the CSS background-position or object-position that keeps the subject visible in a wide crop.
  • Fill, Fit, Full image: Fill crops to your frame like cover, Fit shows the whole image inside it like contain, and Full image shows the file in its own shape so you can see what a crop removes.

License in one line

Use them for free in personal and commercial work, no credit needed. Ask us first only to redistribute the files or to build a competing image library.

Read the Free Asset License

Need faces for the mockup too?

Personified is our free set of 315 AI persona photos from 153 countries, each with a name, age and mood. Same license.

Browse Personified avatars

FAQ

Can I use these backgrounds in commercial projects?
Yes. Use them in client work, apps, landing pages, ads and print without asking and without credit. You need written permission only to redistribute the files themselves or to build a competing image library. Full terms: Free Asset License.
Why is the main subject at the bottom of every image?
They are made for hero sections: the open top area holds your headline and buttons, and the subject (hills, cliffs, shapes) sits under them. Anchor the image to the bottom (for example background-position: center 85%) so the subject stays in frame on wide screens.
What are the focus area and the text-safe area?
The focus area is where the subject sits: keep it in frame when you crop. The text-safe area is a calm, low-detail part of the image where dark text stays readable. Switch the preview to Full image and turn on Areas to see both drawn on the picture.
Which file should I use on my site?
Use the 1600 px WebP for most hero sections: it is small and sharp on laptop screens. Use the full-size JPG for print, retina hero images or when you edit the file. For mobile-only layouts, the 640 px WebP is enough.
Are these images AI-generated?
Yes. We made them with AI image tools from our own prompts, then picked, cropped and tagged each one by hand. The palette, crop and text-area data on this page comes from the image pixels, not from the prompt.
Can I hotlink the image URLs?
While you prototype, yes. For production, download the file and serve it from your own host or CDN. We may rate-limit or move hotlinked files.