{"id":4796,"date":"2021-07-16T09:59:32","date_gmt":"2021-07-16T13:59:32","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/how-to-fix-blue-links-in-gmail\/"},"modified":"2025-12-18T16:49:51","modified_gmt":"2025-12-18T21:49:51","slug":"how-to-fix-blue-links-in-gmail","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/how-to-fix-blue-links-in-gmail","title":{"rendered":"How to Fix Gmail Blue Links for an Email Dream Come True"},"content":{"rendered":"\n\n\t
\n
\n \t
\n \t\t
\n \t\t\t
\n \t\t\t\t

Frustrated by seemingly random, off-brand blue links when QA testing your otherwise perfect email in Gmail? Been there. Done that. The good news? You didn\u2019t do anything wrong. Since 2017, Gmail automatically turns some of your copy\u2014like email addresses, phone numbers, physical addresses, and times\u2014into clickable elements, sometimes turning them blue. And as the second most popular email client with over 30% of emails opens, according to our data<\/a>, you can\u2019t ignore Gmail.<\/p>\n

Despite what blue links are and why<\/a>, you need your email to look like what was approved. Or at least have the links be on brand. Fortunately, removing the default styling isn\u2019t that hard. We\u2019ll walk you through how the blue links come about\u2014and what you can do to change them to match your email\u2019s design. All while maintaining the easy-to-use links for your Gmail audience.<\/p>\n

\n\n\n\n
\"\"<\/td>\n\n

Do your emails have blue links?<\/strong><\/p>\n

Always know when email clients update their email rendering with Litmus Email Previews. Preview your emails in all popular email clients and devices\u2014including Gmail\u2014and spot errors before you send.<\/p>\n

Learn more \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

 <\/p>\n

Keep accessibility in mind<\/h2>\n

First, it\u2019s important to remember the blue links serve an important purpose. They make it more convenient for your subscribers to act on your email\u2014for example, to navigate to a location you\u2019ve included or give you a quick call. Both great for usability and accessibility.<\/p>\n

\"Example
Yes, we had some blue links in our emails, too<\/figcaption><\/figure>\n

However, these auto-links may come with the default styling: underlined and blue. This can conflict with your email design and even make your email less<\/i> accessible if the links are on a background color<\/a> that doesn\u2019t contrast well with them.<\/p>\n

\"Example
The blue link here is barely noticeable<\/figcaption><\/figure>\n

So, you\u2019ll want to retain the functionality of the link but style it so it better matches your email design and is legible.<\/p>\n

\n\n\n\n
\"The<\/td>\n\n

Beware: There are other culprits of a broken email
\n<\/strong><\/p>\n

Do email errors make you shudder? Blue links are just one way your email can look broken. Take a deep dive into what can break your email and the tips & tricks to stay true.<\/p>\n

Reveal common issues and fixes \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

 <\/p>\n

Three ways to change the blue link color in Gmail<\/h2>\n

To change the blue link color, you have to understand why it happens. When Gmail spots an address or phone number in an email, it automatically adds an extra style declaration, which formats any link in the email as blue if it has no inline styles attached to it:<\/p>\n \t\t\t<\/div>\n \t\t<\/div>\n \t<\/div>\n <\/div>\n<\/div>\n\n\n\n

.ii a[href] { color: #15c; }<\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
The class .ii<\/b> refers to the class given to the div that contains the whole email in Gmail. The a[href]<\/b> is a CSS attribute selector. This declares that any link in the .ii<\/b> class needs to be the color blue.<\/p>\n
Addresses and phone numbers aren\u2019t commonly linked in emails. However, Gmail recognizes them and turns them into a link whether you like it or not. As these links are created on the fly, they don\u2019t have any inline styles attached to them, and thus, the default styling above is used.<\/p>\n
There are three methods you can use to stop the links from turning blue, depending on if you want these links to look the same or different from the other links in your email.<\/p>\n
Option 1: Use the <span> method<\/h3>\n
The <span> method is the simplest technique to stop phone numbers and addresses turning blue in Gmail. It\u2019s perfect for if you want to stylize them differently from your other links<\/b> while keeping their functionality. Here\u2019s how:<\/p>\n
    \n
  1. Wrap the telephone number or address in a <span><\/span><\/li>\n
  2. Give the <span> a class, for example: <span class=\u201dcontact\u201d><\/span><\/li>\n
  3. Declare the class in the <style> section of your email to stylize the telephone number or address however you want<\/li>\n
  4. Profit!<\/li>\n<\/ol>\n
    Here\u2019s an example of the HTML where the address appears in the email:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
    <span class=\"contact\">675 Massachusetts Ave.<br \/>Cambridge, MA 02139, USA<\/span><\/pre>\n\n\n\n\n\t
    \n  
    \n  \t
    \n  \t\t
    \n  \t\t\t
    \n  \t\t\t\t
    And here\u2019s an example style declaration for the class \u201ccontact\u201d in the <style> block in your email\u2019s <head> where we set the link to be black (#000000) and underlined:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
    <style type=\"text\/css\">\n    .contact a {color: #000000!important; text-decoration: underline!important;}\n<\/style><\/pre>\n\n\n\n\n\t
    \n  
    \n  \t
    \n  \t\t
    \n  \t\t\t
    \n  \t\t\t\t
    Change the black color in our example code by swapping the #000000 to a color hex code<\/a> that fits your brand. If you don\u2019t want your link to be underlined, change the underline in your code to none.<\/p>\n
    Creating a <span> with a class name around the address or phone number gives you something to target using CSS. Just targeting the <span> itself won\u2019t style the link. It will only style the unlinked text, while the link<\/i> inside the <span> will still have the default blue style. So, to target the link<\/i> inside the span, the style declaration includes the class name as well as \u201ca.\u201d<\/p>\n
    This is especially great for phone numbers if you want to add <a rel=\"noopener\" target=\"_blank\" href=”tel:XXX-XXXX”> directly to phone numbers but don\u2019t want the phone number trying to open a phone app on desktop. And then you get into having to hide and show content for desktop vs. mobile. Just skip the headache and take advantage of the fact that an email client is finally doing something to help you out.<\/p>\n
    Option 2: Override all link styling<\/h3>\n
    Another option is to set your own default styling which will apply to all<\/i> links in an email. This option is perfect if you want your address or phone number links to look the same<\/b> as your other links while keeping the functionality that Gmail gives them.<\/p>\n
    Add this Gmail-specific style declaration to your <style> block in your email\u2019s <head>, like so:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
    <style type=\"text\/css\">\n    u + #body a {\n    \t  color: inherit;\n    \t  text-decoration: none;\n    \t  font-size: inherit;\n    \t  font-family: inherit;\n    \t  font-weight: inherit;\n    \t  line-height: inherit;\n    }\n<\/style><\/pre>\n\n\n\n\n\t
    \n  
    \n  \t
    \n  \t\t
    \n  \t\t\t
    \n  \t\t\t\t
    Then add the ID \u201cbody\u201d to the body tag:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
    <body id=\"body\">\n<\/body><\/pre>\n\n\n\n\n\t
    \n  
    \n  \t
    \n  \t\t
    \n  \t\t\t
    \n  \t\t\t\t
    The underline \u201cu\u201d is a targeting method for Gmail. It converts the doctype to an underline tag, and Gmail is the only client that behaves this way. Thus, using the underline tag with the adjacent sibling selector of a div or id\/class on that div in CSS is a unique method of targeting only Gmail clients (at least for the moment). In this example, we\u2019ve used an id of \u201cbody.\u201d<\/p>\n
    With this method, if you want links in your email to have slightly different styles, this will need to be added inline to those specific links since this technique above will style all links as have been defined in the style declaration.<\/p>\n
    However, there is a small caveat with this method.<\/b><\/p>\n
    It does not work when Gmail users have images off by default and then enable them. This is due to a bug in Gmail that improperly changes styling once images are enabled. Email developer R\u00e9mi Parmentier has some more details<\/a> on this bug.<\/p>\n
    Option 3: Add the <a> tag and make them links yourself<\/h3>\n
    By proactively linking the elements that Gmail would auto-link, you have more control over their styles and colors. This option is perfect if you also want to change where the content links to<\/b>, removing<\/i> Gmail\u2019s default functionality.<\/p>\n
    Maybe you have a contact page on your website you\u2019d rather take subscribers to instead of having them automatically open their phone\u2019s navigation app or instantly call you directly.<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
    <a style=\"color:#4B525D; text-decoration:none;\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/contact-us\/\">675 Massachusetts Ave.<br \/>Cambridge, MA 02139, USA<\/a><\/pre>\n\n\n\n\n\t
    \n  
    \n  \t
    \n  \t\t
    \n  \t\t\t
    \n  \t\t\t\t
    In the example above, the physical address is styled to a gray color with no underline and is linked to our website\u2019s contact page. This will prevent Gmail from applying its default style and functionality.<\/p>\n
    Goodbye, Gmail blue links<\/h2>\n
    With either of our three methods, blue links will no longer throw off your email\u2019s design and make it look broken in Gmail. And that\u2019s great\u2014because broken emails can hurt engagement and conversions (and you definitely don\u2019t want that).<\/p>\n
    Have questions about our methods? Or got another solution to share? Let us know in the comments below.<\/p>\n
    \n\n\n\n
    \"\"<\/td>\n\n
    Create on-brand, error-free emails with Litmus<\/strong><\/p>\n
    See how your emails look (no more blue links, right?) across 90+ email clients, apps, and devices\u2014including Gmail. Say goodbye to broken emails. Whew!<\/p>\n
    Book a demo \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
     <\/p>\n
    Originally published on October 13, 2017, by Jaina Mistry. Last updated on July 16, 2021.<\/em><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    Frustrated by your email\u2019s blue link color in Gmail? Find out how to get rid of the dreaded Gmail blue links so your email marketing stays on brand.<\/p>\n","protected":false},"author":3,"featured_media":31648,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[106],"blog_category":[53],"class_list":["post-4796","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-gmail","blog_category-tips-resources"],"yoast_head":"\nHow to Fix Blue Links in Gmail to Match Your Branding - Litmus<\/title>\n<meta name=\"description\" content=\"Frustrated by your email\u2019s blue link color in Gmail? Find out how to get rid of the dreaded Gmail blue links so your email marketing stays on brand.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/how-to-fix-blue-links-in-gmail\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Fix Gmail Blue Links for an Email Dream Come True\" \/>\n<meta property=\"og:description\" content=\"Frustrated by your email\u2019s blue link color in Gmail? Find out how to get rid of the dreaded Gmail blue links so your email marketing stays on brand.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/how-to-fix-blue-links-in-gmail\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-16T13:59:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-18T21:49:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2017\/10\/How-to-fix-blue-links-in-Gmail.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"725\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Fix Blue Links in Gmail to Match Your Branding - Litmus","description":"Frustrated by your email\u2019s blue link color in Gmail? Find out how to get rid of the dreaded Gmail blue links so your email marketing stays on brand.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/how-to-fix-blue-links-in-gmail","og_locale":"en_US","og_type":"article","og_title":"How to Fix Gmail Blue Links for an Email Dream Come True","og_description":"Frustrated by your email\u2019s blue link color in Gmail? Find out how to get rid of the dreaded Gmail blue links so your email marketing stays on brand.","og_url":"https:\/\/www.litmus.com\/blog\/how-to-fix-blue-links-in-gmail","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2021-07-16T13:59:32+00:00","article_modified_time":"2025-12-18T21:49:51+00:00","og_image":[{"width":1380,"height":725,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2017\/10\/How-to-fix-blue-links-in-Gmail.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/how-to-fix-blue-links-in-gmail#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-fix-blue-links-in-gmail"},"author":{"name":"","@id":""},"headline":"How to Fix Gmail Blue Links for an Email Dream Come True","datePublished":"2021-07-16T13:59:32+00:00","dateModified":"2025-12-18T21:49:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-fix-blue-links-in-gmail"},"wordCount":12,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-fix-blue-links-in-gmail#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2017\/10\/How-to-fix-blue-links-in-Gmail.jpg","keywords":["Gmail"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/how-to-fix-blue-links-in-gmail#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/how-to-fix-blue-links-in-gmail","url":"https:\/\/www.litmus.com\/blog\/how-to-fix-blue-links-in-gmail","name":"How to Fix Blue Links in Gmail to Match Your Branding - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-fix-blue-links-in-gmail#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-fix-blue-links-in-gmail#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2017\/10\/How-to-fix-blue-links-in-Gmail.jpg","datePublished":"2021-07-16T13:59:32+00:00","dateModified":"2025-12-18T21:49:51+00:00","description":"Frustrated by your email\u2019s blue link color in Gmail? Find out how to get rid of the dreaded Gmail blue links so your email marketing stays on brand.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-fix-blue-links-in-gmail#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/how-to-fix-blue-links-in-gmail"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/how-to-fix-blue-links-in-gmail#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2017\/10\/How-to-fix-blue-links-in-Gmail.jpg","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2017\/10\/How-to-fix-blue-links-in-Gmail.jpg","width":1380,"height":725,"caption":"Person looking at computer with Gmail icon and blue links illustration"},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/how-to-fix-blue-links-in-gmail#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"How to Fix Gmail Blue Links for an Email Dream Come True"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/4796","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=4796"}],"version-history":[{"count":5,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/4796\/revisions"}],"predecessor-version":[{"id":121734,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/4796\/revisions\/121734"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/31648"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=4796"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=4796"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=4796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}