Label & badge snippets

Build a visible AI-content badge and copy the HTML/CSS. Add a caption and a link to the unaltered original where a rule (e.g. AB 723) requires it.

Badge style

Position

Image URL (optional)

Caption (optional)

Link to unaltered original (optional)

Preview

Inline HTML

<!-- AI content label: AI-generated -->
<figure style="position:relative;display:inline-block;margin:0;">
  <img src="your-image.jpg" alt="AI-generated" style="display:block;max-width:100%;height:auto;border-radius:8px;" />
  <span aria-label="AI-generated" style="position:absolute;bottom:8px;right:8px;
        font:600 12px/1 system-ui,sans-serif;color:#fff;background:rgba(17,24,39,.82);
        padding:5px 9px;border-radius:999px;backdrop-filter:blur(2px);
        display:inline-flex;align-items:center;gap:5px;">
    <span aria-hidden="true">✨</span>AI-generated
  </span>
</figure>

CSS class version

/* Add once to your stylesheet */
.ai-label-wrap { position: relative; display: inline-block; }
.ai-label-wrap img { display:block; max-width:100%; height:auto; border-radius:8px; }
.ai-label {
  position: absolute; bottom:8px;right:8px;
  font: 600 12px/1 system-ui, sans-serif; color: #fff;
  background: rgba(17,24,39,.82); padding: 5px 9px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
}

<!-- Markup -->
<figure class="ai-label-wrap">
  <img src="your-image.jpg" alt="AI-generated" />
  <span class="ai-label">✨ AI-generated</span>
</figure>

Tooling, not legal advice. A badge is a visible label; for machine-readable marking that survives downloads, also use the Metadata embedder.