Quick and Simple Placeholdit

Create effective image placeholders for your designs and projects. Great for wireframes, mockups, and production apps.

Preview Placehold it image
Copy to clipboard
Export
View in new tab
Reset

How to Generate Placeholder Image

Placeholdit is a simple and fast placeholder image generator for designers and developers. Just enter the desired image size (e.g., 400x400), and instantly get a placeholder image. You can customize background color, text color, and add custom text for more control.

This tool is perfect for wireframes, mockups, or testing layouts. No account or coding needed—just copy the image and use it anywhere. Placeholdit helps streamline your workflow with quick, customizable dummy images. Whether you’re building websites or apps, it’s the easiest way to create placeholder images tailored to your needs.

Size

You can define the size of your placeholder image using two different URL patterns. This makes it flexible for different use cases:

  • 400x400 → Explicitly sets width = 400px and height = 400px
  • 400 → Automatically assumes height = width (400x400)

Both options work the same, and you can use whichever is easier for your workflow.

Example with 400x400:

Preview

Example with 400:

Preview

Color

You can easily change the background and text color of your placeholder image by adjusting the URL — no coding required!

Background Color

To change the background color of your placeholder image, just add the color name or hex code (without #) in the URL.

Using color names:

  • placeholdit.com/400/white
  • placeholdit.com/400/blue
  • placeholdit.com/400/green

Using hex codes (without #):

  • placeholdit.com/400/FFFFFF → White background
  • placeholdit.com/400/000000 → Black background

Note: Always write hex codes without the # symbol.

Example with Black:

Preview

Example with 000000:

Preview

Text Color

To change the text color, simply add it after the background color in the URL.

Format

placeholdit.com/widthxheight/background/text color

Using color names:

  • placeholdit.com/400/white/black → White background with black text
  • placeholdit.com/400/red/white → Red background with white text

Using hex codes:

  • placeholdit.com/400/FFFFFF/000000 → White background, black text
  • placeholdit.com/400/000000/FFFF00 → Black background, yellow text

Note: Use hex codes without # here as well.

Why we use custom colors?

  • Preview your design with real brand colors.
  • Test layouts with color contrast in mind.
  • Create visually consistent wireframes or mockups.

Text

You can show any text on your placeholder image by using the ?text= option in the URL.

How to Use:

Add your text like this:

  • placeholdit.com/600x400?text=Hello+World
  • This will create a 600x400 image with “Hello World” in the center.

Note: Use + instead of spaces (e.g. Hello+World)

Example with Hello+World:

Preview

Font Family

You can use a different font style in your placeholder text.

Just add ?font= in the URL.

Example:

placeholdit.com/600x400?text=Hello+World&font=noto-serif

This will display “Hello World” in the Noto Serif font.

Available Fonts:

  • noto-serif
  • roboto
  • open-sans
  • ....

Note: Font names should be in lowercase and use hyphens (-) instead of spaces.

Font Size

You can set the font size of your placeholder text using ?font_size= in the URL.

Example:

placeholdit.com/400?&font_size=50

This will show “Hello World” with a font size of 100px.

Example with font size 50:

Preview

Example with font size 100:

Preview

Placeholdit.com news and updates

  1. Users can now download their customized placeholder images in multiple formats — SVG, PNG, JPEG, GIF, WebP, and AVIF.

  2. Now you can contact us easily using our simple new form — perfect for questions, support or feedback.

  3. Improved user experience with better exercises and fixed some small bugs for smoother performance.

  4. Updated color section in the documentation. Also made changes to the text color API.

  5. Improved the quality of placeholder image for better clarity and sharpness.

  6. Updated the font size API to provide more accurate and consistent sizing.

  7. Added color picker for 'background' and 'text color' fields in the image placeholder section to enhance customization.

  8. We’ve launched! 🎉 Placeholdit.com lets you build clean, custom placeholder images for your projects in seconds.