Ask the Community
Visual Overlay
Upload and overlay designs for visual comparison
Visual Overlay allows you to compare your web page designs and the actual web page by overlaying them on top of each other.
Key features
- Grid overlays to validate alignment and spacing
- Rulers and pixel measurements
- Opacity and color filters for layout comparison
Initiate Visual Overlay
Perform the following steps to begin visual overlay:
Open the webpage you want to inspect in Chrome.
Click the Testing Toolkit icon and select Visual Overlay.
Use the Upload image option if have an image saved locally, or, select Connect to Figma to use an image from your Figma board.
Select the Upload image option, and select the desired image stored locally.
You can manipulate the available settings such as, Position, Opacity, Scale to make a comparison with the uploaded image.
Select the Connect to Figma option if you intent to use an image from your Figma board.
Perform the on-screen instructions to generate a user access token, and use it in the area provided.
You can manipulate the available settings such as, Position, Opacity, Scale to make a comparison with the uploaded image.
Click Exit to turn off the overlay.
For comprehensive documentation and usage examples of the Visual Testing and Layout Debugging features, visit the official BrowserStack Visual Testing documentation.
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!