Pattern and AI-Style Background Placeholders from URLs

Use cases

When a pattern placeholder does more work than a solid fill

Demos and live preview environments benefit from placeholder images that look like real content at a glance. A grid of patterned placeholders communicates "this is a media grid" more clearly than a row of identical gray tiles.

Onboarding screenshots, documentation illustrations, and UI mockups in Storybook stories all benefit from the same logic. When the placeholder is visually distinct — a noise texture, a geometric ring pattern, a soft gradient — readers understand they are looking at a representative layout rather than a broken state.

The honest tradeoff: pattern placeholders are heavier than solid fills. An SVG with geometric elements is a few kilobytes versus a near-zero solid rect. For permanent fallbacks in production, a simpler colored placeholder is usually the right call. For demo and documentation contexts, a pattern is worth the weight.

Thumbnail styles

Use the thumbnail route to pick a background pattern

The thumbnail route supports a style parameter that controls the background decoration pattern. The options are soft (gentle gradient fog), rings (concentric circles), lines (parallel diagonal strokes), and pattern (a geometric tile repeat).

Combine style with theme for color and label for a text pill. The output is a 1200x630 image by default, but you can set any dimensions.

<!-- Soft gradient style, purple theme -->
https://fallback.pics/api/v1/thumbnail/800x500?style=soft&theme=purple&text=Product+Preview

<!-- Rings style, blue theme -->
https://fallback.pics/api/v1/thumbnail/800x500?style=rings&theme=blue&text=Dashboard+Screenshot

<!-- Lines style, dark theme -->
https://fallback.pics/api/v1/thumbnail/800x500?style=lines&theme=dark&text=Report+Preview

<!-- Pattern tile, green theme, category label -->
https://fallback.pics/api/v1/thumbnail/800x500?style=pattern&theme=green&label=SaaS&text=Feature+Overview

Direct color control

Build custom gradient backgrounds with hex pairs

The base image route accepts a bg color and text color. For patterns that look like AI-style imagery, use adjacent purple-to-blue values for the background and a near-white for the foreground.

The URL-encoded text becomes a label centred in the image. Omit the text parameter to get a pure color swatch.

<!-- Purple-blue gradient feel (two-tone hex pair) -->
https://fallback.pics/api/v1/800x500/7C3AED/FFFFFF?text=Project+Banner

<!-- Warm orange-amber palette -->
https://fallback.pics/api/v1/800x500/EA580C/FEF9C3?text=Campaign+Preview

<!-- Muted dark-green UI palette -->
https://fallback.pics/api/v1/800x500/064E3B/ECFDF5?text=Analytics+Card

Storybook

Use pattern URLs as default args in component stories

Storybook stories that show image-carrying components need a stable src for visual regression snapshots. Hard-coding a real image URL creates a snapshot dependency on an external asset. A fallback.pics pattern URL is deterministic, so the snapshot never changes unless you change the URL.

Set the pattern URL as the default arg value and the story stays consistent across CI runs.

// card.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Card } from './Card';

const meta: Meta<typeof Card> = {
  component: Card,
  args: {
    imageUrl:
      'https://fallback.pics/api/v1/thumbnail/800x420?style=soft&theme=purple&text=Story+Preview',
    title: 'Default card title',
  },
};

export default meta;
export const Default: StoryObj<typeof Card> = {};

Square patterns

Pattern placeholders for profile and product tiles

Square containers need a square URL. The /square/ route accepts a single size and applies the same styling options. Use it for profile photos, product thumbnails, brand logos, and any other 1:1 aspect ratio container.

Combine with the text parameter to include initials, a category label, or a product code.

<!-- Square pattern tile, 300px -->
https://fallback.pics/api/v1/square/300?text=AB&theme=purple

<!-- Square for a product category badge -->
https://fallback.pics/api/v1/square/200?text=NEW&theme=green

<!-- Avatar-style with initials -->
https://fallback.pics/api/v1/avatar/80?text=JD

Further reading

Pattern URLs in design handoff and documentation

Design handoff tools like Figma often show placeholder images in their live preview mode. A stable fallback.pics pattern URL can be embedded in Figma's prototype or dev-mode layer spec so engineers see a realistic image stand-in before production assets are attached.

For documentation sites, pattern thumbnails replace the manual effort of producing featured images for every page. The thumbnail route's label and title parameters cover most documentation use cases.

# https://fallback.pics/docs/
# https://fallback.pics/placeholder-image-api/
# https://fallback.pics/blog/generate-blog-thumbnails-from-text/
# https://fallback.pics/blog/chart-dashboard-thumbnail-placeholders/