How to Make an Image Transparent With HTML and CSS

Use CSS opacity on the <img> element. Values range from 0 (visually invisible) to 1 (fully opaque). For example:

<img class="faded-image" src="photo.png" alt="A description of the image">

.faded-image {
  opacity: 0.5;
}

An opacity of 0.5 makes the image 50% opaque, allowing the content behind it to show through. The MDN opacity reference documents the property and its value range.

Fade an image with HTML and CSS

Minimal example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Transparent image</title>
  <style>
    .faded-image {
      width: 320px;
      opacity: 0.5;
    }
  </style>
</head>
<body>
  <img class="faded-image" src="photo.png" alt="A mountain at sunrise">
</body>
</html>

Keep the image as a semantic <img> when it communicates information. Supply useful alt text; MDN describes alt as the text replacement for an image’s content.

Common opacity values

Value	Result
`1`	Fully opaque
`0.75`	Slightly translucent
`0.5`	Half opaque
`0.25`	Very faint
`0`	Invisible visually, but still present in the DOM

You can also use a percentage, such as opacity: 50%;, in modern CSS. A number between 0 and 1 is the most familiar form.

Fade an image on hover or focus

.photo {
  opacity: 1;
  transition: opacity 180ms ease;
}

.photo:hover,
.photo:focus-visible {
  opacity: 0.65;
}

For a keyboard-accessible control, put the image inside a real link or button and style the control’s focus state. Do not make an interactive image impossible to see when it receives focus.

Make only a background color translucent

If text or other foreground content must stay fully opaque, do not lower opacity on a wrapper containing that content. Use an alpha-bearing background color instead:

.panel {
  background-color: rgb(0 0 0 / 40%);
  color: white;
}

This changes only the panel’s background color. The MDN background-color reference covers this property, and the alpha-value reference explains the transparency component.

Use a background image for decorative artwork

.hero {
  min-height: 20rem;
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
  background-color: rgb(0 0 0 / 25%);
  background-blend-mode: multiply;
}

Background images are appropriate for decoration. Browsers do not provide special information about CSS background images to assistive technology, so use a semantic <img> with alternative text when the image carries meaning. See MDN’s background-image documentation.

Overlay a translucent layer without fading the image

.card {
  position: relative;
  isolation: isolate;
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 35%);
  z-index: -1;
}

.card-content {
  position: relative;
}

Another common pattern is a positioned overlay above a background image. This keeps foreground text at full opacity while darkening or tinting the image.

Opacity behavior and edge cases

It affects the whole element. Opacity applies to the image and all of its rendered contents. Although the property is not inherited in the usual CSS sense, a translucent parent makes its descendants appear translucent too.
Zero opacity does not remove an element. An element with opacity: 0 remains in the DOM and may still receive pointer events or keyboard focus. Use display: none, visibility: hidden, the hidden attribute, or disabled interaction when you need it removed from use.
Opacity creates a stacking context. Any value other than 1 can change how descendants layer against neighboring elements. Check z-index and positioning if an overlay appears behind the wrong content.
Transparency is not the same as a transparent file. CSS opacity changes the rendered result. It does not edit the PNG, JPEG, or WebP on disk and does not add an alpha channel to the source file.
JPEG cannot store transparency. If you need a reusable file with transparent pixels, create an image with an alpha channel, such as PNG or WebP, in an image editor or image-processing pipeline.

Accessibility checks

Check contrast after fading an image or text over it. MDN describes current WCAG guidance as 4.5:1 for normal text and 3:1 for larger text; large text is at least 24px, or at least 18.66px when bold. These ratios apply to text contrast, not to a required opacity value.

Keep meaningful images in <img> elements with accurate alt text.
Use empty alt="" for purely decorative images.
Do not communicate state only through reduced opacity; provide text, an icon with an accessible name, or another clear cue.
Ensure links and buttons remain visibly identifiable in every state.

Debugging and troubleshooting

Symptom	Likely cause	Fix
The image does not change	The selector does not match, or another rule wins.	Inspect the element, verify the class name, and check computed `opacity`. Increase selector specificity only when needed.
Text beside the image also fades	Opacity was applied to a wrapper containing the text.	Apply opacity directly to the image or use an alpha background/overlay.
The image is invisible but still clickable	`opacity: 0` hides pixels without disabling interaction.	Remove it from interaction with `pointer-events: none` and appropriate focus handling, or use `display: none`/`hidden` when it should not exist in the layout.
A layer appears behind another section	Opacity created a stacking context or the `z-index` relationship is wrong.	Set positioning and `z-index` deliberately, and inspect ancestor stacking contexts.
The image looks washed out	The background beneath it is too bright or opacity is too low.	Raise opacity, change the underlying color, or add a controlled overlay.
Screen readers do not announce a background image	CSS backgrounds are not image content in the accessibility tree.	Use a semantic `<img>` with alternative text when the image matters.

Performance and reliability considerations

Opacity is a lightweight visual property, but animated large images can increase compositing work. Keep transitions short and test on low-powered devices.
Changing opacity does not reduce download size. Compress and appropriately size the source image, and use responsive images when necessary.
For many images, a class or shared component rule is easier to maintain than inline styles.
Test against the actual page background, dark mode, high-contrast settings, keyboard navigation, and reduced-motion preferences.

Or skip the browser setup

If you need rendered screenshots of pages that contain transparent overlays or faded images, ScreenshotNeo captures the final page with one GET request. It accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status.

See the ScreenshotNeo API documentation for all options.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com/transparent-image.html \
  -o shot.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={
        "access_key": "YOUR_API_KEY",
        "url": "https://example.com/transparent-image.html",
    },
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com/transparent-image.html'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const data = Buffer.from(await res.arrayBuffer());
require('node:fs').writeFileSync('shot.webp', data);

ScreenshotNeo also supports full-page capture with lazy images loaded, CSS-selector element capture, custom CSS and JavaScript, waits, device presets, retina scale, request blocking, cookies and headers, caching with a chosen TTL, signed links, asynchronous jobs, bulk capture, PDFs, usage reporting, and an MCP server with take_screenshot, get_page_info, and capture_pdf for AI agents. It has 1,000 free screenshots per month with no card; paid plans start at $5 for 3,000.

Create a free ScreenshotNeo account and start with 1,000 screenshots each month at no charge.

FAQ

Can I use a value greater than 1?

Use values from 0 to 1, or 0% to 100%. Values outside the permitted range are clamped by CSS and provide no useful extra opacity.

How do I make only part of an image transparent?

CSS opacity affects the entire rendered image. For transparent pixels in selected areas, edit the asset with an alpha channel or use a mask, clip path, or another image-compositing technique.

Does opacity change the original image file?

No. It changes how the browser renders the element. The downloaded source file remains unchanged.

Should I use an inline style?

Inline style works for a one-off value, but a class is usually easier to reuse, override, animate, and maintain.