Documentation
Getting Started
fallback.pics is a lightning-fast placeholder image service that requires zero setup. Simply use our URLs directly in your HTML, and we'll generate images on-demand.
<img src=https://fallback.pics/api/v1/400x300 alt="Placeholder">
Basic Usage
The simplest way to use fallback.pics is to specify dimensions in the URL path.
Rectangle
https://fallback.pics/api/v1/600x400 Square
https://fallback.pics/api/v1/200 Dimensions
Size Range: 10x10 pixels to 4000x4000 pixels
Minimum Size
https://fallback.pics/api/v1/10x10 Large Size
https://fallback.pics/api/v1/1200x600 Image Formats
Support for all modern image formats. Simply add the extension to your URL.
SVG
Vector, scalable
.svg PNG
Lossless
.png JPEG
Compressed
.jpg WebP
Modern
.webp AVIF
Next-gen
.avif GIF
Legacy
.gif https://fallback.pics/api/v1/400x300.webp
Colors
Customize background and text colors using hex codes or CSS color names.
Path-based Colors
https://fallback.pics/api/v1/400x300/3B82F6/FFFFFF Query Parameters
https://fallback.pics/api/v1/400x300?bg=FF0000&fg=FFFFFF CSS Color Names
https://fallback.pics/api/v1/400x300?bg=navy&fg=gold Transparent Background
https://fallback.pics/api/v1/400x300?bg=transparent Available CSS Colors
Text Customization
Custom Text
https://fallback.pics/api/v1/400x300?text=Product+Image Multi-line Text
Use \n for line breaks
https://fallback.pics/api/v1/400x300?text=Line+1\nLine+2\nLine+3 Font Size
https://fallback.pics/api/v1/400x300?text=Large&fontSize=48 Font Selection
Choose from 11 professional font families.
System UI
?font=system Sans Serif
?font=sans Serif
?font=serif Monospace
?font=mono Inter
?font=inter Roboto
?font=roboto Lato
?font=lato Montserrat
?font=montserrat Open Sans
?font=opensans Raleway
?font=raleway Poppins
?font=poppins Presets
Pre-configured layouts for common use cases.
Avatar
Perfect for user profiles
https://fallback.pics/api/v1/avatar/100 https://fallback.pics/api/v1/avatar/100?text=JD Banner
Wide format for headers
https://fallback.pics/api/v1/banner/1200x400 Blur Effect
Blurred placeholder effect
https://fallback.pics/api/v1/blur/400x300 Skeleton Loader
Loading state placeholder
https://fallback.pics/api/v1/skeleton/400x300 AI-Powered Generation
Generate contextually relevant placeholders based on industry and mood.
E-commerce
?context=e-commerce&mood=minimal Technology
?context=tech&mood=futuristic Healthcare
?context=healthcare&mood=calm Fashion
?context=fashion&mood=elegant Available Contexts
- • e-commerce
- • tech
- • healthcare
- • education
- • finance
- • travel
- • food
- • fashion
Available Moods
- • vibrant
- • minimal
- • professional
- • playful
- • elegant
- • bold
- • calm
- • futuristic
Animated Placeholders
CSS-only animations for loading states. Supports reduced motion for accessibility.
skeleton
Shimmer effect
animated/skeleton/300x200 pulse
Pulsing opacity
animated/pulse/300x200 wave
Wave animation
animated/wave/300x200 shimmer
Light sweep
animated/shimmer/300x200 gradient
Rotating gradient
animated/gradient/300x200 dots
Loading dots
animated/dots/300x200 Accessibility: Add ?reducedMotion=true to disable animations for users who prefer reduced motion.
Data Visualization Placeholders
Professional chart mockups for dashboards and analytics interfaces.
Bar Chart
chart/bar/600x400 Pie Chart
chart/pie/600x400 Line Chart
chart/line/600x400 Area Chart
chart/area/600x400 Donut Chart
chart/donut/600x400 Scatter Plot
chart/scatter/600x400 Radar Chart
chart/radar/600x400 Heatmap
chart/heatmap/600x400 Retina Support
Generate high-resolution images for retina displays.
Standard (1x)
200x200 Retina (2x)
200x200?retina=2 Renders at 400x400, displays at 200x200
Super Retina (3x)
200x200?retina=3 Renders at 600x600, displays at 200x200