Does this verify that the image has transparency?

No. It changes only the CSS surface behind the caller-supplied image. It does not inspect image data or make an alpha-channel claim.

Can I use this with remote images?

Pass any image URL your application is already allowed to display. The component does not fetch or modify it itself.

Media Alpha Preview

Compare a supplied image over accessible CSS background modes.

A translucent blue shape over a transparent canvas

CheckerboardLightDark

Compare the supplied image in context.

Customise

Region label

Caption

Initial background

Code

<MediaAlphaPreview
  src="/images/your-image.png"
  alt="Describe the image"
/>

Media Alpha Preview places your existing image element over a CSS checkerboard, light surface or dark surface. It is a presentation aid for comparing the image in context; it does not inspect pixels or determine whether transparency is present.

The source URL and image data remain caller-owned. The component does not fetch, decode, sample, transform or rewrite image pixels. Use meaningful alt text for informative imagery and an empty alt value for decorative imagery.

Background selection uses native radio controls, works with a keyboard and remains available with reduced motion, forced colours and print styles.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/media-alpha-preview

Usage

import { MediaAlphaPreview } from "@/components/media-alpha-preview";

export function ProductProof() {
  return (
    <MediaAlphaPreview
      src="/images/product-mark.png"
      alt="Blue product mark on a transparent canvas"
      label="Product image background preview"
      caption="Compare the supplied image against different surfaces."
    />
  );
}

Props

Prop	Type	Default	Description
src	string	required	Caller-supplied image URL; it is passed directly to the image element.
alt	string	required	Alternative text for the image, or empty text when decorative.
label	string	Image background preview	Accessible name for the preview section.
caption	string	undefined	Optional visible caption.
background	MediaAlphaPreviewBackground	undefined	Controlled background mode: checkerboard, light or dark.
defaultBackground	MediaAlphaPreviewBackground	checkerboard	Initial mode for uncontrolled use.
onBackgroundChange	(background) => void	undefined	Called after a visitor selects a mode. Controlled owners should commit the new mode.
className	string	undefined	Additional classes merged onto the outer section.

Customisation

The component uses the page's background, muted, foreground and border tokens. It has no animation or image-processing options.

.preview { max-inline-size: 36rem; }

Frequently asked questions

Does this verify that the image has transparency?: No. It changes only the CSS surface behind the caller-supplied image. It does not inspect image data or make an alpha-channel claim.
Can I use this with remote images?: Pass any image URL your application is already allowed to display. The component does not fetch or modify it itself.

Related components

Explore image review toolsBrowse image and media components for other review workflows.Image components