Brighten Your Website: How to Remove the Default Featured Image Shading in WordPress 2019 Theme

This article is going to help you change the built in WordPress 2019 Gutenberg Featured Image shading.

“I say there is no darkness but ignorance.”

William Shakespeare, Twelfth Night

William Shakespeare warned us that there is no darkness but ignorance. Applying the quote to this blog post, there are two darknesses — ignorance, and also the darkness that envelops the Featured Image on the newly released Twenty Nineteen theme!

Featured Image shading from Key Largo with WordPress 2019 Gutenberg darkening and color enhancement
Darkened and Color Enhanced by default Featured Image


As many of my colleagues followed suit, I was excited with the most recent WordPress offering! I quickly update to WordPress 5.x, and Gutenberg blocks, and Twenty Nineteen … and bam, gosh I do not like those darkened Featured Images! While I am sure it is just that I am not yet used to them, this Darkness Factor must go! Another reason is that I have folks complaining because they didn’t ask for this “new shading” darkness, it just showed up.

In this article I’m going to show you the easy way to get rid of those colored Featured Images. Stick with me, it is just a few steps.

Before we start, let me mention there is some amount of controversy over changing this darkening behavior. The reason for the default darkening behavior has to do with contrast, and making sure the text on your main page shows up adequately. After you have completed this task, make sure your text shows up reasonably well.

In my opinion, it is always good to have options. As you get more familiar with the 2019 theme, you may even want to change the behavior back to default. It is easy enough to do. Enough said, here is how to updated the WordPress 2019 Featured Image default color enhancement.

There are only two configuration items to make all this happen. The first is to turn off the 2019 Filter. The second is to add CSS to remove shading.

1. Log in as Administrator

The WordPress menu when you Login to WordPress as Administrator
Login to WordPress as Administrator

First thing you’ll have to do is log in as Administrator. If you’ve read my blog post on Security, I’ll expect that the username is NOT admin! 🙂

You actually don’t have to be Admin, you just have to have the ability to change the Appearances section of WordPress.

2. Disable 2019 filter

The first step is to disable the filter.

Go to Customizer

WordPress menu - Appearance > Customize
WordPress menu – Appearance > Customize

Click through to the 2019 Theme Customizer.

Go to Colors

Active Theme 2019 > Colors
Active Theme 2019 > Colors

Click through to the Colors menu.

Disable Filter

Colors Primary Color Default & Disable Filter
Colors Primary Color Default & Disable Filter

Uncheck “Apply a filter to featured images using the primary color”.

While you change the default, keep a note of this option! You might even consider dabbling in the Custom Color area just to get a better understanding of what this option accomplishes.

Before you continue with the next step you should go check your Featured Image. It might be to your liking! Here is what mine looked like.

Darkened but not color enhanced Featured Image
Darkened but not color enhanced Featured Image

3. Add nobackground CSS

The second step is to update the CSS.

Open the Additional CSS editor

WordPress 2019 Theme Additional CSS editor
WordPress 2019 Theme Additional CSS editor

We’ll be adding a little code to the CSS editor here. CSS editing in WordPress is not complicated, so don’t get worried!

On the Twenty Nineteen theme Customizer page, there is a link to “Additional CSS”. This allows you to modify CSS attributes in a controlled environment. If anything goes wrong, you can just go right back into this area and delete any customizations. The rest of CSS will remain intact! This “Additional CSS” area basically adds to and overwrites any competing CSS attributes.

Additional CSS editor
Additional CSS editor

In the Additional CSS Editor, add the following CSS

.site-header.featured-image:after { 
background: none;

The Additional CSS area will look like this when you are done. And your Featured Image preview will be the featured image with no shading!

4. Publish

Theme Publish
Theme Publish

Click the Publish button at the top of the page, and you are done!

The final product!

This is the way the image was supposed to look.

Featured Image with no color enhancements
Featured Image with no color enhancements


Shout out to @addweb-solution-pvt-ltd who was the first post I found with the necessary CSS. Thank you!