{{ summaryTitle }}
{{ summaryValue }}

{{ summaryLine }}

Fill:{{ resultsReady ? computation.values.fill_label : '—' }} Contrast:{{ resultsReady ? computation.values.contrast_label : '—' }} Text:{{ resultsReady ? `${computation.values.font_size_px} px` : '—' }}
Presets update both dimensions and load a clear dimension label.
Each side accepts a whole value from 1 to 4000 pixels.
×px
Use up to three short lines and 240 characters.
Use transparent only when the surrounding surface supplies the intended backdrop.
Default: #E2E8F0.
Default: #1F2937. Solid fills receive a WCAG contrast cue.
The neutral default adds no overlay.
System sans is the neutral browser-aligned default.
Use 0 for automatic sizing; manual values accept 8-200 px.
px
Regular weight is the neutral default.
Zero preserves a rectangular canvas.
px
Zero omits the border.
px
The color is emitted only when a border is present.
{{ computation.values.svg_source }}
{{ computation.values.html_snippet }}
{{ computation.values.css_snippet }}

The chart renderer is unavailable. Exact byte counts remain in the parameter ledger.

ParameterValueHandoff noteCopy
{{ row.label }}{{ row.display }}{{ row.detail }}
CSS Gradient Generator Build CSS gradients using linear, radial or conic geometry with exact color stops and optional modern interpolation spaces for copy-ready stylesheets.
Color Palette Generator Generate a seeded HEX palette with fixed harmony rules, black-or-white text choices, and WCAG contrast checks for every color pair.
Image Compressor Compress one image locally in your browser, compare size and visual quality, then download a resized or reformatted copy with metadata controls.
Image Format Converter Convert one image locally with format, resize, crop, quality, and transparency controls while checking the actual output and byte size.

Before a final image exists, a placeholder can reserve its exact space in a layout. The width and height establish the aspect ratio, so cards, banners, and responsive containers can be tested without shifting when real artwork arrives. A useful placeholder also identifies the intended asset instead of looking like an unexplained gray box.

Scalable Vector Graphics (SVG) fit this job well because the canvas, shapes, text, and accessibility labels are expressed as text markup. The same source can appear directly in a browser, inside an image element, or as a CSS background. Its pixel dimensions define the intended layout size even though the vector shapes remain sharp when displayed at another size.

  • Canvas dimensions preserve the space the finished asset must occupy.
  • Visible labels distinguish a hero image from a thumbnail or social preview during review.
  • Accessible naming gives the generated image a title and description instead of relying only on visible text.
  • Contrast determines whether the label remains readable against a solid background.

A contrast ratio is a useful warning, not a complete accessibility verdict. Normal text generally needs at least 4.5:1 for WCAG Level AA, while qualifying large text uses 3:1. Font size, font weight, the eventual background, and the role of the image still matter. Transparent placeholders cannot have a fixed contrast ratio because the destination surface supplies the backdrop.

Placeholders are temporary communication aids. They do not optimize images, reproduce a final crop, prove that a social platform will accept a file, or guarantee that a chosen font exists on every device. Treat the generated markup as a layout contract and replace it with the reviewed production asset when that asset is ready.

How to Use This Tool:

Choose the intended canvas first; every later spacing and font decision depends on those dimensions.

  1. Select a Size preset or enter a custom width and height from 1 through 4,000 pixels.
  2. Write up to three short label lines. Leave the label empty to use the dimension pair, and keep Font size at 0 when automatic sizing is appropriate.
  3. Choose a solid or transparent background, text color, optional pattern, border, corner radius, font family, and weight. Check the contrast cue whenever the fill is solid.
  4. Inspect Image preview and the generated SVG source. Use the image or CSS snippet that matches the handoff, then test it in the actual container and at narrow widths.

Interpreting Results:

The dimension summary is the intended canvas, not the size at which every browser must display it. Check the containing layout for stretching or cropping. Automatic font size is constrained by the longest label line, line count, canvas width, and canvas height; a very long label may still be less useful than shorter copy.

For a solid fill, AAA, AA, large text, and low describe the computed foreground-to-background ratio. They do not certify the entire page. Not measured for a transparent fill means contrast must be checked against every real background where the placeholder will appear.

Technical Details:

An SVG placeholder combines a fixed coordinate system with responsive vector content. Width, height, and viewBox share the same dimensions, while percentage positions keep the label centered. The generated image also contains a linked title and desc so its accessible name does not depend on the visible text alone.

Formula Core

For a solid background, contrast is the ratio between the lighter and darker relative luminance values.

CR=Lmax+0.05Lmin+0.05

Relative luminance uses linearized red, green, and blue channels:

L=0.2126Rlin+0.7152Glin+0.0722Blin

Each eight-bit color channel is divided by 255. A normalized channel at or below 0.04045 is divided by 12.92; a larger channel is transformed by raising (c + 0.055) / 1.055 to the power 2.4. The ratio is retained to four decimal places, while its visible label uses two.

RatioLabel
≥ 7.00:1AAA
≥ 4.50:1 and < 7.00:1AA
≥ 3.00:1 and < 4.50:1large text
< 3.00:1low

Automatic font sizing takes the smallest of three limits: available width for the longest line, available height for the number of lines, and 18% of the shorter canvas side. The rounded result is clamped from 8 through 160 pixels. A manual value of 0 selects that rule; explicit font sizes accept 8 through 200 pixels.

Transformation Core

StageResult
NormalizeExpand 3-digit HEX colors to 6 digits, uppercase them, validate dimensions and style ranges, and keep at most the first 3 non-empty label lines from a 240-character input.
NameUse the dimension pair when the label is empty, then build stable title, description, and pattern identifiers from the complete settings.
DrawCreate the backdrop, optional grid, dots, or diagonal pattern, inset border, and centered text lines. Border width accepts 0 through 32 pixels; corner radius accepts 0 through 200 pixels.
EscapeEscape label text and attribute values before inserting them into XML or HTML.
PackagePercent-encode the SVG into a UTF-8 data URL, then place that URL in the image and CSS snippets.

The aspect ratio is width divided by height. Byte composition measures the UTF-8 SVG source before data-URL encoding, so the encoded snippet can be longer than the reported source size.

Limitations and Privacy Notes:

Generation happens in the browser, and no image file is uploaded. The preview reflects browser SVG rendering but cannot reproduce every email client, content management system, sanitizer, or social platform.

  • System font stacks may resolve to different installed fonts and change text width.
  • A transparent background moves contrast responsibility to the destination layout.
  • Some security policies reject data URLs or inline SVG even when the markup itself is valid.
  • A placeholder's visible label should not replace meaningful alternative text on the final production image.

References: