Remove Grey Border Around Product Image with Transparent Background?

Store Design
, ,
1

URL: CIVILLAIN

password: october2025

its only this product, the sweatpants, i think its because its a dark color

none of the other products have this problem

it doesnt look like that before i upload the photo, shopify does it

please help

2

Could you screenshot the exact product

3

Hey @rnogueira,

I just take a look to the product page that you shared. I found that it has the border around it. By taking a deep look I found that gray border comes from image itself. Imagine if a image has width 500px by 500px. And the main image it’s in the center of it.

If there is border comes from the Shopify or any code then it must be on the 4 corners [left, right, top and bottom]. Bu in your case image has the border itself.

I also check your image by changing the background. So, I found that it’s not showing the shadow for the other backgrounds else than dark.

[See Image Below].

image
image2867×1323 219 KB

:white_check_mark: Well, so I hope you understand the main issue. This issue is fixable itself. But it requires to Edit the images in the Product admin. By any chance can I have your store url collab code so that I can take a look.

Waiting to hear back from you.

Thanks

4

What to Try / Fix

Here are steps you can try. I’ll also show what you should look for in your theme files.

1. Inspect with browser dev tools

  • Open your collections page, find the problematic product card.

  • Right-click → Inspect element (in Chrome, Firefox, etc.).

  • In the elements tab, see the <img> tag or the container for the image. See if there’s a CSS overlay, filter, or background color applied (something like filter: brightness(...), background-color, mix-blend-mode, or opacity).

  • Also check if there’s a pseudo-element like ::before or ::after adding a dark layer over the image.

If you find something like:

.product-card__image {
  background-color: #000;
  mix-blend-mode: multiply;
}

or

img {
  filter: brightness(0.8);
}

Then that’s likely causing the issue.

2. Adjust or disable the overlay/filter in CSS

Once you find which CSS is doing it, you can override it. For example, if there is a rule like this in your theme:

.product-card .image-wrapper::before {
  background-color: rgba(0,0,0,0.5);
}

You can override it in your custom CSS:

/* Turn off overlay for the sweatpants product image */
.product-card--sweatpants .image-wrapper::before {
  background-color: transparent !important;
}

/* Or more broadly disable dark filters on product cards */
.product-card .image-wrapper::before {
  background-color: transparent !important;
}

If there’s a brightness or filter property:

.product-card img {
  filter: none !important;
}

Put overrides like that in your theme’s CSS file (probably theme.css.liquid or similar) or in the Assets folder (a custom CSS file).

3. Mark the problematic product with a special class

To target just that sweatpants product, it helps to give it a unique class (if it doesn’t have one). For example, in your product-card liquid, when rendering the sweatpants, add a class:

<div class="product-card {% if product.handle == 'sweatpants-handle' %}product-card--sweatpants{% endif %}">
  ...
</div>

Replace sweatpants-handle with the actual handle of that product.

Then in CSS you can target that class specifically for overrides (as I showed above).

4. Check image file / variant image

  • Make sure the image file is good quality (not too dark or low-contrast).

  • If the variant image is dark and Shopify is generating a “placeholder” low-res or blurry fallback, try re-uploading a slightly brighter version or adding a small brightness tweak.

If you want, I can look up your exact CSS and send you the exact snippet to drop into your theme to fix that product only. Do you want me to grab that and send it to you?