Introduction

On iOS, tapping a link often shows a gray translucent highlight. That effect comes from the browser’s tap feedback system, and many developers notice it first when a carefully styled button suddenly flashes a color they did not design.

The fix is usually straightforward: control the tap highlight with CSS. The important part is understanding what you are removing so you can replace it with accessible feedback if needed.

Why the Gray Overlay Appears

Safari, Chrome, and Firefox on iOS all run on WebKit, so they share much of the same touch behavior. When you tap a link or another interactive element, WebKit applies a highlight color to confirm that the tap was registered.

That visual feedback is controlled by the -webkit-tap-highlight-color property. By default, the browser chooses a translucent color that often appears gray or bluish depending on the page and system theme.

If your design already has a pressed state, this default overlay can look like a bug even though it is intentional browser behavior.

Removing the Tap Highlight

To remove the gray background, set the highlight color to transparent on the interactive elements you care about.

1a,
2button,
3input,
4textarea,
5select,
6[role="button"] {
7  -webkit-tap-highlight-color: transparent;
8}

In many projects, applying that rule to anchors and custom button-like elements is enough.

If you want to scope the change to a specific component instead of the whole site, target that component class instead:

1.nav-link,
2.cta-button {
3  -webkit-tap-highlight-color: transparent;
4}

This is usually better than a global reset if only part of the interface needs custom interaction styling.

Add Your Own Pressed State

Removing the browser feedback entirely can make taps feel unresponsive, especially on slower pages. A better approach is often to remove the default overlay and provide your own active style.

1.cta-button {
2  display: inline-block;
3  padding: 0.75rem 1rem;
4  background: #0b63f6;
5  color: white;
6  border-radius: 0.5rem;
7  text-decoration: none;
8  -webkit-tap-highlight-color: transparent;
9  transition: transform 120ms ease, opacity 120ms ease;
10}
11
12.cta-button:active {
13  transform: scale(0.98);
14  opacity: 0.85;
15}

This keeps interaction feedback while staying consistent with the rest of your design system.

What This Does Not Change

-webkit-tap-highlight-color only affects the tap highlight overlay. It does not remove:

• element outlines from keyboard focus
• background changes defined in your own :active styles
• JavaScript touch event behavior
• selection or callout behavior

That distinction matters because developers sometimes disable the tap highlight and then assume the remaining flash must come from the browser too. Often it is actually a site-specific :active rule, focus style, or JavaScript class toggle.

Example with HTML

Here is a minimal example you can test on an iPhone or iPad:

<a class="cta-button" href="/pricing">View Pricing</a>

1.cta-button {
2  display: inline-block;
3  padding: 12px 18px;
4  border-radius: 8px;
5  background-color: #111827;
6  color: #ffffff;
7  text-decoration: none;
8  -webkit-tap-highlight-color: transparent;
9}
10
11.cta-button:active {
12  background-color: #1f2937;
13}

If the gray overlay is still visible after this change, inspect whether the tap is landing on a child element that does not inherit the property or whether another style is creating the effect.

Accessibility and UX Tradeoffs

The browser highlight exists for a reason: it confirms user input. Removing it without replacement can make the interface feel less responsive and can reduce clarity for some users.

A good compromise is:

1. disable the default tap highlight
2. keep visible focus styles for keyboard and assistive technology users
3. add a custom pressed state for touch interaction

That preserves both brand consistency and interaction clarity.

Common Pitfalls

One common mistake is setting outline: none instead of changing the tap highlight color. Those are separate behaviors, and removing focus outlines can create accessibility problems without fixing the iOS tap flash.

Another issue is applying the property only to a elements when the clickable area is actually a nested child or a custom element styled as a button. In that case, the tap feedback may still appear.

Developers also sometimes expect this property to work outside WebKit. The vendor prefix is a clue that the behavior is browser-engine-specific.

Finally, do not remove all feedback on interactive elements. If you suppress the default highlight, provide a deliberate :active or pressed style so the interface still feels responsive.

Summary

• The gray tap flash on iOS links is usually controlled by -webkit-tap-highlight-color.
• Safari, Chrome, and Firefox on iOS share this behavior because they use WebKit.
• Setting the highlight color to transparent removes the default overlay.
• A custom :active style is usually better than removing touch feedback entirely.
• Focus outlines and tap highlights are different, so do not use outline: none as a substitute.