Placeholders

Images and avatars as SVG data URIs — no third-party request, works offline

Width

Height

Label

Background

Foreground

Keep this placeholder. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.

Create a free account Sign in

htmlAs a data URI

<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22630%22%20viewBox%3D%220%200%201200%20630%22%3E%0A%20%20%3Crect%20width%3D%221200%22%20height%3D%22630%22%20fill%3D%22%231e1b4b%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M0%200%20L1200%20630%20M1200%200%20L0%20630%22%20stroke%3D%22%23a5b4fc%22%20stroke-opacity%3D%220.25%22%20stroke-width%3D%222%22%2F%3E%0A%20%20%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20dominant-baseline%3D%22central%22%20text-anchor%3D%22middle%22%0A%20%20%20%20font-family%3D%22system-ui%2C%20sans-serif%22%20font-size%3D%2256.699999999999996%22%0A%20%20%20%20font-weight%3D%22600%22%20fill%3D%22%23a5b4fc%22%3E1200%20%C3%97%20630%3C%2Ftext%3E%0A%3C%2Fsvg%3E" alt="" />

htmlAs SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
  <rect width="1200" height="630" fill="#1e1b4b"/>
  <path d="M0 0 L1200 630 M1200 0 L0 630" stroke="#a5b4fc" stroke-opacity="0.25" stroke-width="2"/>
  <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle"
    font-family="system-ui, sans-serif" font-size="56.699999999999996"
    font-weight="600" fill="#a5b4fc">1200 × 630</text>
</svg>

Now use it on something

Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.

Hand these tokens to an agent

npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json

More designer tools

All 36 run in the tab — no account, no upload.See all