Customizing the Look and Feel of reCAPTCHA Using Inline Styles

Google reCAPTCHA

Important: Version 1.0 of the reCAPTCHA API is no longer supported, please upgrade to Version 2.0.

recaptchalogoJVF Consulting is a web design company that can help you with anything you need. This includes the customization of free services such as reCAPTCHA which is meant to protect your website from spam and abuse.

reCAPTCHA uses an advanced risk analysis engine to keep automated software from engaging in abusive activities on your site, but the standard reCAPTCHA widget looks horrible out of the box, but thanks to JVF it can be styled easily.


Once you’ve successfully installed reCAPTCHA on your site, we can turn it from a standard reCAPTCHA style into a transparent style.

You can apply CSS styles to the reCAPTCHA widget to change its colors and other visual properties. This way it looks more neutral, unlike the standard one, by giving it a better look and feel for your website page. This method works by setting the reCAPTCHA theme to “clean”, then adding in the inline styles within the page at the very end, so it loads last.


Use the “!important” directive in your CSS, so that when you call it in your CSS, it won’t matter because it’s usually the last call. Put the styles within the HTML directly on the page, at the end, this makes it the last reference and those styles will be applied.

At the end of all this, it should be transparent and look like the picture below.


Can I customize the reCAPTCHA v2 widget?

Yes. reCAPTCHA offers two themes, light and dark. To choose a theme, simply set the data-theme attribute in the grecaptcha.render parameter. Or, use the Invisible reCAPTCHA. Using the Invisible reCAPTCHA you have more control over the UI.