Loading...
Generate placeholder images with custom width, height, background color, text color, and label. Download as SVG or PNG data URL.
A placeholder image is a temporary graphic used during web design and development, typically showing dimensions and styled with background/text colors, to represent where final imagery will appear.
Formula
SVG Data URI = 'data:image/svg+xml,' + encodeURIComponent(svgString)svgString = the inline SVG markup with rect background and text overlay
encodeURIComponent = URL-encodes the SVG for safe use in src attributes
Worked Example
Creating a 1200×630 OG image placeholder
Did you know? SVG-based placeholders are up to 1000× smaller than equivalent raster images. A 1920×1080 placeholder SVG is typically under 500 bytes, while a PNG of the same size would be ~50KB.
Sources
Convert text to ASCII codes and back. Supports decimal, hex, binary, and octal formats.
Convert width/height to aspect ratios, scale dimensions, and generate responsive embed CSS for any layout.
Calculate required internet bandwidth based on devices and activities in your household.
Encode and decode Base64 strings. Convert text for data URIs, APIs, and safe data transmission.
Create CSS border-radius with visual controls for each corner. Generate circles, pills, and custom shapes.
Create CSS box shadows with multiple layers, live preview, and copy-ready code.