Lifetime dealπŸ‘‰ DON’T MISS OUT. Limited time launch deal ends in

SaaS Hero Collage

Generate SaaS hero-banner collage stills - a soft single-hue field with blurred blob depth, warm rounded lifestyle photo cards scattered asymmetrically, floating white pill labels, and a centered rounded-sans headline in white - with any image model or HTML/CSS composition. The single-hue field and the top-center text safe-zone are hard constraints; card scenes and label wording adapt to the product.

sample still β€” generated with this skill's prompt blueprint
SKILL.md

SaaS Hero Collage - Stills

Style DNA

  • Single-hue field. One soft, desaturated mid-tone hue fills the whole frame - the canonical field is powder blue (around #A9C6E2). Depth comes from 3-5 large blurred rounded blob shapes in slightly lighter and slightly darker steps of the same hue, drifting behind the content. Never a second hue in the field, never a gradient mesh, never hard-edged or outlined blobs.
  • Photo-card treatment. Warm, authentic stock-feel lifestyle photography: people working at laptops, taking calls, reading documents, in believable interiors with natural window light. Every photo sits in a card with a generous uniform corner radius (roughly 24-32px at 1080p scale) and a soft diffuse drop shadow. Cards come in clearly different sizes; one or two may be cropped by the frame edge.
  • Pill-label anatomy. Fully rounded white pill, subtle shadow so it floats. Inside: a small dark line icon on the left (speech bubble, calendar, document-with-check) plus a short category label of 2-4 words in dark slate sans ("Complaints & Enquiries" energy - workflow categories, not slogans). A pill sits near, and may slightly overlap, the photo card it relates to.
  • Headline typography. Friendly rounded geometric sans (Poppins-, Quicksand-, or Sofia-adjacent), pure white, centered, two lines maximum. An optional small white wordmark sits above it. No subline, no button, no CTA - the headline carries the frame alone.
  • Asymmetric scatter with a text safe-zone. Cards and pills scatter across the lower two-thirds and the side edges at varied scales and heights; the top-center zone stays completely clear for wordmark plus headline. Generous breathing room between every element - the field must stay visible around everything.

Subjects & framing

  • Best subjects: SaaS and service categories where people-at-work photos read instantly - support, operations, onboarding, HR, bookings, finance admin, logistics coordination. Not hardware, not developer-terminal aesthetics, not abstract 3D.
  • Aspect ratios: 1.91:1 or 16:9 for site heroes and social banners; 1:1 or 4:5 for feed adaptations (reduce to 3-4 cards). Choose once; every plate in the set keeps the same ratio.
  • Density: 4-6 photo cards and 2-4 pill labels in a full hero. Card people are candid and mid-task - no lens-aware grins, no handshakes, no pointing-at-screen group shots. Mix portrait crops with wider environmental crops.
  • Safe areas: the headline sits entirely on the plain field and never crosses a card; every pill is fully readable; cards that bleed off an edge imply the scatter continues beyond the frame.
  • Wordmark: render the brand name as a simple white uppercase wordmark only when a name is confirmed - never invent a logo mark, icon, or tagline for it.
  • Every photo shares one warm grade: soft daylight, gentle contrast, skin tones natural. A single cool or flat photo in the scatter breaks the set.

Still set

A set of independent standalone images - never one gridded sheet, split screen, or storyboard board:

  1. Full hero - the complete composition: field with blob depth, wordmark, two-line white headline, asymmetric card scatter, floating pills.
  2. Photo-card close-up plate - a single lifestyle card large in frame on the plain field, corner radius and soft shadow clearly readable, one pill label overlapping its edge. This locks the card treatment for the set.
  3. Pill-label sheet - 4-6 pill labels loosely arranged on the field with blob depth, no photos. This locks icon weight, padding, and label tone.
  4. Alternate-hue variant - the full hero recomposed on a second single-hue field (soft sage, warm apricot, muted lavender) with the same layout logic, proving the system recolors cleanly.

HTML/CSS route

The full composition builds cleanly in code around real photographs:

  • Field: a solid background-color in the chosen hue; blobs as absolutely positioned rounded divs in lightened/darkened steps of the same hue with filter: blur(70px).
  • Cards: <img> with border-radius: 28px; object-fit: cover; and box-shadow: 0 24px 60px rgba(20,40,70,.18), scattered with absolute positioning inside a frame container using overflow: hidden so edge cards crop naturally.
  • Pills: display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; background: #fff; with a small inline SVG stroke icon and a box-shadow: 0 10px 30px rgba(20,40,70,.12).
  • Headline: a rounded Google-font sans (Poppins 500/600 or Quicksand 600, falling back to system-ui), white, text-align: center, a manual <br> keeping it to two lines.
  • The lifestyle photographs themselves need real photography or an image model - CSS composes everything else.
  • Hue swaps for the alternate variant are one-variable edits when field, blob, and shadow colors derive from a single CSS custom property.

Check photo sources before composing: cool-toned, harshly lit, or posed-looking stock breaks the warm candid feel - swap the photo rather than color-grading around it.

Failure modes

  • A second hue or a purple-blue gradient mesh in the field; hard-edged, outlined, or glossy blobs.
  • Stock cliches inside cards: lens-aware grins, handshakes, pointing-at-screen groups, sterile white studio offices.
  • UI screenshots, dashboards, or charts inside the photo cards - this style uses human lifestyle photos only.
  • Headline crossing a card, three-line headlines, added sublines, buttons, or CTA copy.
  • Pills with emoji, filled colorful icons, colored backgrounds, or sentence-length labels.
  • More than 6 cards or a crowded scatter; inconsistent corner radii across cards; harsh dark shadows.
  • Text baked into the photographs; real brand names, logos, or watermarks anywhere in frame.
  • Cool, clinical, or heavily filtered photo grading that fights the warm candid look.
  • Pills or headline tinted with the field hue - both stay pure white with dark or white type respectively.

Copy-ready prompt

Copy the block as-is and paste your subject at the end. The colors named in it are this style's defaults - swap any of them for your own.

A SaaS hero-banner photo collage in an editorial marketing style. One soft,
desaturated single-hue field fills the entire frame, with three to five large
blurred rounded blob shapes in slightly lighter and slightly darker steps of
the same hue drifting behind the content - never a second hue, never a
gradient mesh, never hard-edged or outlined blobs. Scattered asymmetrically
across the lower two-thirds and the side edges: four to six warm, authentic
lifestyle photographs of candid people mid-task in believable interiors with
natural window light, each set in a card with a generous uniform corner
radius and a soft diffuse drop shadow, the cards in clearly different sizes
with one or two cropped by the frame edge. Every photo shares one warm grade:
soft daylight, gentle contrast, natural skin tones. Floating near the cards,
sometimes slightly overlapping them: two to four fully rounded pure white
pill labels, each holding a small dark line icon on the left and a short
workflow-category label of two to four words in dark slate sans. The
top-center zone stays completely clear for a centered headline in a friendly
rounded geometric sans, pure white, two lines maximum - no subline, no
button, no CTA. Generous breathing room between every element; the field
stays visible around everything. Palette: powder-blue field around #A9C6E2
with blobs in lighter and darker steps of that same hue, pure white pills and
headline, dark slate icon and label text, warm natural photo grading (default
palette - replace any of these with your own colors). 16:9 landscape; the
only text in frame is the white two-line headline and the short pill labels -
no text baked into the photographs, no real brand names, logos, or
watermarks.

Subject: [PASTE YOUR HEADLINE + what the collage cards and pill labels should show - one or two sentences]

Example subject

Headline "Support that answers before they ask" - cards of agents on calls and typing at bright desks, one reading documents beside a plant; pills for refunds, order tracking, and escalations.

Turn this into a finished video

CoAnimator is a free desktop studio that renders code-driven videos locally β€” bring this style in and ship a full animated video with voiceover and music.

Download CoAnimator β€” free