Placeholder Content Reference
Quick-reference for generating placeholder content in HTML, CSS, and design tools.
Placeholder Image Services
Use these URLs directly in <img> tags or CSS background-image:
/* Lorem Picsum — random photo by dimensions */
<img src="https://picsum.photos/800/400" alt="Placeholder">
/* Specific image by ID */
<img src="https://picsum.photos/id/237/800/400" alt="Placeholder">
/* Grayscale */
<img src="https://picsum.photos/800/400?grayscale" alt="Placeholder">
/* Blurred */
<img src="https://picsum.photos/800/400?blur=5" alt="Placeholder">CSS Placeholder Patterns
Pure CSS placeholders you can use without any image service:
/* Skeleton loading placeholder */
.skeleton {
background: linear-gradient(
90deg,
#1a1a2e 25%,
#16213e 50%,
#1a1a2e 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 4px;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Avatar placeholder with initials */
.avatar-placeholder {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 1.1rem;
}Placeholder Image Sizes for Common Uses
| Use Case | Dimensions | Aspect Ratio |
|---|---|---|
| Hero / Banner | 1920 x 600 | 16:5 |
| Blog post thumbnail | 800 x 450 | 16:9 |
| Social share (OG) | 1200 x 630 | ~1.91:1 |
| Product card | 400 x 400 | 1:1 |
| Avatar | 128 x 128 | 1:1 |
| Logo | 200 x 60 | ~3.3:1 |
Other tools: Clip Path Studio, Gradient Studio, Font Studio, URL Encoder