Why is a thick gray line being added to some images in Webflow, even though there is no sign of it in the designer?
TL;DR
- Inspect the live site using DevTools to check for unintended borders, shadows, or inherited styles from parent elements.
- Confirm the image file itself doesn't contain a gray edge and set the image display to block in Webflow.
- Avoid scaling or DPI issues by using proper dimensions and object-fit settings, override any default Webflow styles, and test in multiple browsers to rule out rendering glitches.
A thick gray line on images in Webflow—only visible on the published site and not in the Designer—often results from unintentional borders, shadows, or image rendering behavior in the browser.
1. Check for Applied Borders or Box Shadows
- Inspect the image element using Chrome DevTools (right-click > Inspect on the live site).
- Look for any border, box-shadow, or outline styles that may have been added via a parent element or through inherited styles from a class or combo class.
- Sometimes a gray line appears when a box-shadow is used improperly, even if it's barely visible in Webflow Designer.
2. Verify Image File Itself
- Open the original image file outside of Webflow to see if there's an actual line or edge included in the image.
- If you're using a PNG or JPEG, it's possible the gray edge is embedded in the file, especially if it was exported with background color blending.
3. Set Image Display to Block
- Images in Webflow may be inline by default, which may cause rendering artifacts (especially when next to other inline elements).
- Select the image, go to the Style panel, and set
Display: Blockto prevent unwanted spacing or lines.
4. Check Image Scaling or DPI Issues
- When an image is being resized using unusual width/height values or unconventional DPI, the browser can introduce artifacts.
- Set the image to 100% width (or fixed dimensions) and use object-fit: cover/contain where appropriate.
5. Remove Default Webflow Image Styling
- Webflow occasionally applies default styles like max-width: 100% or display: inline-block to images.
- Override these by creating a custom class and explicitly setting border: none and box-shadow: none.
6. Test in Different Browsers
- Open the published website in Safari, Chrome, and Firefox.
- If the gray line appears only in one browser, it could be a rendering bug or anti-aliasing issue.
Summary
A gray line showing on images in Webflow is usually caused by unintended borders, image artifacts, or rendering quirks in the browser. Use browser inspection tools to trace the exact source, ensure the image has clean edges, and override any inherited styling that might apply borders or shadows.