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
- Use browser developer tools to inspect published elements for unexpected borders, shadows, or outlines applied via styles or interactions.
- Verify image and container display settings, check for hidden parent styles, confirm image file quality, and test across browsers for rendering issues.
A thick gray line appearing on some images in Webflow—but not visible in the Designer—is likely caused by image rendering artifacts, browser styles, or parent container styling that only shows on the live site.
1. Check for Border or Box Shadow on Published Site
- Even if borders or shadows aren’t visible in the Webflow Designer, they may be applied at runtime via interactions, scroll effects, or inherited styles.
- Inspect the element using your browser’s developer tools (e.g., Chrome DevTools). Look for any
border,box-shadow, oroutlinestyles attached to the image or its parent container.
2. Review Image Display Settings
- Ensure that the image display mode is set to the expected value. For example, if the image is stretched improperly, artifacts may appear.
- Try setting Display: Block and checking Object-fit: Cover or Contain only when needed. Avoid using default
inlinedisplay for images that need specific layout control.
3. Examine Parent or Background Elements
- A thick line could originate from an underlying div or section mistakenly styled with a gray background, border, or shadow.
- Check if any overflow: hidden or padding/margin overlap is causing unusual effects around images.
4. Confirm Image File Integrity
- Open the raw image directly in a browser. If the line is baked into the image, it's in the source file, not Webflow.
- Re-export the asset at the correct resolution and format (e.g., PNG, JPG) to eliminate embedded artifacts.
5. Browser or Zoom-Level Rendering Issues
- Some browser zoom levels or GPU compositing quirks can create rendering artifacts like lines or shadows on images, especially SVGs or JPGs with transparent edges.
- Try the published site on multiple browsers and devices to confirm if the issue is browser-specific.
6. Check for CMS or Dynamic Styling
- If you're using CMS images, check if any Collection List conditional styling or class bindings are unintentionally applying styles to specific items only.
Summary
A gray line on images—visible after publish but not in Designer—is usually caused by unintended borders, shadows, or rendering quirks. Use your browser’s developer tools to trace live styles and verify the image file’s integrity and layout structure.