Free placeholder images
for every framework

Free placeholder image and avatar API. No signup required. Generate images of any size and format with customizable colors and text.

Try it nowDocumentation
600x200 placeholderAliceBob SmithCharlieDana Lee

Official packages for your favorite frameworks

ReactNext.jsVue.jsNuxtSvelteAstroLaravel
Any Size
Generate placeholder images from 1x1 up to 4096x4096 pixels.
Avatars
Circular avatar images from any name, with auto-generated initials.
OG snippets
1200×630 share images with title, subtitle, call to action, and optional logo.
Multiple Formats
SVG, PNG, JPEG, and WebP. Choose via file extension or query param.
Unique Colors
Deterministic color hashing gives each URL its own accessible palette.
Blazing Fast
Served via CloudFront CDN with aggressive caching worldwide.
No Signup
Completely free. No API keys, no accounts, no rate limits.

Tailwind-Native API

Every query parameter is named after a Tailwind CSS utility class. If you know Tailwind, you already know the API.

Tailwind CSS

<div class="
  bg-blue-500
  text-color-white
  text-align-left
  font-weight-bold
  letter-spacing-wide
  opacity-80
  blur-sm
  brightness-110
  contrast-125
  saturate-150
  border-2
  rounded-lg
  grayscale
">

FreePlaceholder API

/600x400?
  bg=3b82f6
  text-color=ffffff
  text-align=left
  font-weight=bold
  letter-spacing=wide
  opacity=80
  blur=2
  brightness=110
  contrast=125
  saturate=150
  border=4
  rounded=lg
  grayscale
bg

Background

Any hex color

text-color

Text Color

Any hex color

text

Text

Any string

text-size

Font Size

Any px value

text-align

Text Align

left, center, right

text-transform

Text Transform

uppercase, lowercase, capitalize

text-decoration

Text Decoration

underline, overline, line-through

letter-spacing

Letter Spacing

tighter, tight, wide, wider, widest

font-weight

Font Weight

thin, light, normal, medium, semibold, bold, extrabold, black

opacity

Opacity

0–100

blur

Blur

0–100 px

brightness

Brightness

0–200 (100 = normal)

contrast

Contrast

0–200 (100 = normal)

hue-rotate

Hue Rotate

0–360 degrees

invert

Invert

true / false

saturate

Saturate

0–200 (100 = normal)

sepia

Sepia

true / false

grayscale

Grayscale

true / false

border

Border Width

Any px value

border-color

Border Color

Any hex color

border-style

Border Style

solid, dashed, dotted, double, none

rounded

Border Radius

sm, md, lg, xl, 2xl, 3xl, full, or px

Try It

Adjust the parameters below to see a live preview.

Dimensions & Format
Colors & Text
A
#
A
#
Border & Rounded
A
#
Filters
https://freeplaceholder.com/600x400
Preview

Placeholder Images

Generate placeholder images by specifying dimensions in the URL.

Examples

https://freeplaceholder.com/600x400
https://freeplaceholder.com/600x400.png
https://freeplaceholder.com/1920x1080.webp
https://freeplaceholder.com/600x400?bg=3b82f6&text-color=ffffff
https://freeplaceholder.com/800x600?text=Hello+World&text-size=48

Snippet images

Open Graph–style cards: default 1200×630 PNG, with title, subtitle, CTA, optional logo URL, and the same Tailwind-style styling as placeholders.

Examples

https://freeplaceholder.com/snippet
https://freeplaceholder.com/snippet.svg
https://freeplaceholder.com/snippet?title=Ship+faster&subtitle=API-first+placeholders&cta=Read+the+docs
https://freeplaceholder.com/snippet?width=800&height=420&bg=1e293b&text-color=f8fafc&title=Compact+card

Avatars

Generate circular avatar images from names or initials.

AliceAlice
Bob SmithBob Smith
CharlieCharlie
Dana LeeDana Lee
EveEve

Examples

https://freeplaceholder.com/avatar/John+Doe
https://freeplaceholder.com/avatar/alice.png?size=256
https://freeplaceholder.com/avatar/Bob?bg=ef4444&text-color=ffffff

API Reference

Placeholder Images

URL PatternDescription
/{W}x{H}SVG placeholder (default format)
/{W}x{H}.{fmt}Specific format: .svg, .png, .jpg, .webp
/{W}x{H}?bg={hex}&text-color={hex}Custom hex colors via query params

Snippet images (Open Graph)

URL PatternDescription
/snippet1200×630 PNG (default size and format)
/snippet.{fmt}Same as /snippet with format: .svg, .png, .jpg, .jpeg, .webp
/snippet?title=…&subtitle=…&cta=…Headline, subheading, and call to action
/snippet?logo={https-url}Raster logo from a public HTTPS URL (PNG, JPEG, GIF, WebP)

Avatars

URL PatternDescription
/avatar/{name}SVG avatar with auto-generated initials
/avatar/{name}.{fmt}Specific format: .svg, .png, .jpg, .webp

Query Parameters

ParameterDescriptionExample
bgBackground hex color?bg=3b82f6
gradientGradient direction: to-t, to-tr, to-r, to-br, to-b, to-bl, to-l, to-tl, or radial?gradient=to-r
fromGradient start hex color (requires gradient)?from=3b82f6
viaGradient midpoint hex color (optional)?via=8b5cf6
toGradient end hex color (requires gradient)?to=ec4899
text-colorText hex color?text-color=ffffff
textCustom text overlay?text=Hello
text-sizeFont size in pixels?text-size=32
text-alignText alignment: left, center, right?text-align=left
text-transformTransform: uppercase, lowercase, capitalize?text-transform=uppercase
text-decorationDecoration: underline, overline, line-through?text-decoration=underline
letter-spacingSpacing: tighter, tight, wide, wider, widest, or px?letter-spacing=wide
font-weightFont weight (Tailwind values)?font-weight=bold
opacityOpacity 0–100?opacity=50
blurGaussian blur in px (0–100)?blur=4
brightnessBrightness 0–200 (100 = normal)?brightness=120
contrastContrast 0–200 (100 = normal)?contrast=150
hue-rotateHue rotation 0–360 degrees?hue-rotate=90
invertInvert colors?invert
saturateSaturation 0–200 (100 = normal)?saturate=150
sepiaSepia tone filter?sepia
grayscaleGrayscale filter?grayscale
borderBorder width in px?border=4
border-colorBorder hex color?border-color=000000
border-styleStyle: solid, dashed, dotted, double, none?border-style=dashed
roundedBorder radius: sm, md, lg, xl, 2xl, 3xl, full, or px?rounded=lg
formatOutput format (default svg for placeholders, png for /snippet)?format=png
widthSnippet width (default 1200)?width=1200
heightSnippet height (default 630)?height=630
titleSnippet headline?title=Hello
subtitleSnippet subheading?subtitle=World
ctaSnippet call to action?cta=Read+more
logoHTTPS URL to a raster logo image?logo=https%3A%2F%2F…
sizeAvatar dimensions (square)?size=256

Integration

See the full documentation for framework-specific guides (React, Next.js, Vue, Nuxt, Svelte, Laravel).

HTML

<img src="https://freeplaceholder.com/600x400.png" alt="Placeholder" width="600" height="400">
<img src="https://freeplaceholder.com/avatar/John+Doe.png" alt="John Doe" width="128" height="128">

Markdown

![Placeholder](https://freeplaceholder.com/600x400.png)
![Avatar](https://freeplaceholder.com/avatar/John+Doe.png)

CSS

.hero {
  background-image: url('https://freeplaceholder.com/1920x1080.svg');
}

Caching

All image responses include aggressive cache headers. Identical URLs always produce identical images, making long-term caching safe. Responses are served through CloudFront CDN for fast global delivery.

Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable

Color Hashing

When no custom colors are provided, the API uses a deterministic hash of the request path to generate a unique color pair. The same URL always produces the same colors. Foreground colors are automatically chosen for WCAG AA contrast compliance.

200x100300x200400x300500x400600x500250x250150x150