Why is a thick gray line being added to some images in Webflow, even though there is no sign of it in the designer?

A thick gray line appearing on images in Webflow (but not visible in the Designer) is typically caused by external rendering or styling issues that only show up in the published site.

1. Check for Image Borders or Box Shadows

• In Webflow Designer, select the image element and go to the Style panel.
• Ensure that Border and Box Shadow are both set to "none" or "0px".
• Sometimes classes or combo classes applied at higher levels (e.g. parent elements or global styles) may be adding borders.

2. Inspect the Published Site Using DevTools

• Right-click the image on your published website and choose Inspect.
• Look for computed styles such as:
• border
• box-shadow
• outline
• If any of these are present and unexpected, identify the source class or style and remove it in Webflow.

3. Check for Artifact Lines in the Image Asset Itself

• Download or open the original uploaded image in an image editor (e.g., Photoshop or Preview).
• Sometimes compression artifacts or faint edges can appear due to how the image was designed or saved (e.g., a drop shadow or background gradient).

4. Review Webflow’s Responsive Image Rendering

• Webflow generates multiple sizes of an image for responsive loading.
• Occasionally, this can slightly misalign antialiased edges depending on transparency or container color.
• Try setting the image to display:block to prevent inline spacing or rendering quirks:
• Select the image → Go to the Style Panel → Set Display to Block.

5. Check for Background Color Bleeding

• If the image has transparent or semi-transparent edges, and it's placed on a gray or dark-colored container, the container may appear as a line around the image.
• To test: Place the image on a white section and see if the line disappears.

6. Compare on Different Browsers

• Sometimes formatting inconsistencies occur only in specific browsers, especially with Safari.
• Test your image in Chrome, Firefox, and Safari. If the issue is browser-specific, apply targeted fixes using browser-specific classes if needed.

Summary

The gray line is likely due to unintended borders, shadows, or background bleed from transparency. Inspect styles in DevTools, confirm image transparency, and ensure no parent elements add visual artifacts. Adjusting image display to block and checking responsiveness may also help.