Free header and hero backgrounds slides

Last Updated on July 14, 2026 by Editorial Team

This freebie includes 4 different header and hero sections, with modern gradients and well organized minimalistic design. Created by UISuMo.

Look closely at the four slides and a pattern emerges: each one pairs a bold, oversized headline in a serif or clean sans typeface with a short supporting line of body text and a single, unmistakable call-to-action button. The “Peace On Earth” slide sits on near-black with a subtle wave graphic at the base, while the “Fast And Furious Facial” and cooking app slides shift into that signature blue-to-purple gradient wash. The fourth, “The Key To Your Motivation,” breaks the pattern entirely with a moody, desaturated photograph of stationery and tools flat-lay, proving the set can flex between flat color and photographic backdrops without losing its identity.

That range is really the strength here. You get two gradient-driven hero styles, one dark minimal variant, and one photo-based option, all sharing the same navigation bar treatment, the same rounded pill-shaped buttons, and the same restrained approach to text hierarchy. Because the underlying structure repeats across all four (logo top left, nav links top right, headline centered, CTA button, small social icons or carousel dots), swapping one slide for another within a single site feels seamless rather than jarring.

Where This Set Fits Best

These heroes were clearly built with service and product landing pages in mind. The beauty and skincare-style slide, the cooking or food-delivery app mockup with its phone frame and calendar UI, and the motivational content slide all point toward:

• Landing pages for apps, especially ones that benefit from showing an in-context phone mockup
• Beauty, wellness, and spa or clinic websites that want a soft gradient mood
• Coaching, productivity, or self-help sites where a photographic flat-lay feels more grounded
• Agency or portfolio homepages that need a punchy, quote-like opening statement
• Seasonal or campaign pages, given the holiday-toned “Peace On Earth” example

The dark wave slide in particular works well as an opening screen for a one-page site, since the wave graphic doubles as a natural divider into the content below it.

Customizing the Gradients and Type

If you’re adapting these for your own brand, start with the background gradient since it sets the emotional tone for everything else. Swap the blue-purple combination for tones that match your palette, but keep the same soft diagonal direction and moderate contrast so the white headline text stays legible. When editing the photographic slide, try dropping in your own flat-lay or product photo and applying a similar dark overlay, this keeps the contrast level consistent with the rest of the set so all four slides still feel like one family.

For the typography, the serif headline against the sans-serif nav and body copy is doing a lot of the visual work. Preserve that pairing if you can; swapping in a heavier or more decorative headline font is a quick way to reposition the same layout for a more editorial or luxury-leaning brand. Keep the supporting text short, a single sentence works better than a paragraph, since these hero areas rely on white space and restraint rather than dense copy.

Pair any of these slides with a matching set of icons or a simple line-art illustration further down the page to keep the minimal mood going, and reuse the pill-button style on secondary CTAs so the whole page reads as one considered system rather than a single flashy header stitched onto a generic template.