How can I remove the gray background that appears when tapping an icon link on mobile devices in Webflow?

Published on
September 22, 2023

To remove the gray background that appears when tapping an icon link on mobile devices in Webflow, you can make use of the tap highlight color property. This property allows you to specify the color that appears when an element is tapped on a touch screen device. By setting this color to transparent, you can effectively remove the gray background. Here are the steps to achieve this:

  1. Open your Webflow project in the Webflow Designer.
  2. Select the icon link element that you want to modify.
  3. In the Style tab of the right sidebar, locate the "Tap Highlight Color" property.
  4. Click on the color swatch next to the property to open the color picker.
  5. In the color picker, move the transparency slider to make the color completely transparent (or manually enter a hex value of #00000000 to represent fully transparent white).
  6. Preview the changes on your mobile device by publishing or exporting the site.

By following these steps, you can remove the gray background that appears when tapping an icon link on mobile devices in Webflow.

Note: This solution is specifically for icon links and may not apply to other elements with tap effects on mobile devices.

Additional questions:

  1. How do I change the tap highlight color for other elements in Webflow?
  2. Can I customize the tap highlight effect for different states of an element in Webflow?
  3. What other mobile optimizations can I make in Webflow to enhance the user experience?