How To Change The Front Page Panel Shaded Gradient In Twenty Seventeen

When using front page panels in Twenty Seventeen, the default gradient is a percentage shade of black from the bottom of the panel, to no shade at the top of the panel. This shading can be changed.

The default front page panel gradient is on the left, the changed gradient is on the right.

The gradient has been changed to use 90% black from the bottom of the panels.

You should be able to see the effect on the screenshot on the right.

Where and how to change the front page panel shaded gradient:

In WordPress Admin > Appearance > Edit CSS.

Enter the CSS code below.

  • The lines of code change the shade from the default of 30% top 90%. You can reduce this percentage to reduce the intensity of the gradient, or you can change it to zero to remove the gradient.
  • The lines of code have 0.9 where the gradient is set to 90%. Note that this number appears 4 times in the code. For internet explorer version 6 to 9, the number is in hexadecimal on a lower line. For 90% the value is set to E6. To calculate the hexadecimal value for another percentage first multiply the percentage by 255. If the number has decimal places, use the nearest whole number, and then type in google ‘thewholenumber in Hex’

The CSS code:

.panel-image:before {
	/* Permalink - use to edit and share this gradient:,000000+100&0+0,0.3+100 */ /* FF3.6-15 */
	background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); /* Chrome10-25,Safari5.1-6 */
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.9)));
	background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#E6000000", GradientType=0); /* IE6-9 */
	/* bottom: 0; */
	/* content: ""; */
	/* left: 0; */
	/* right: 0; */
	/* position: absolute; */
	/* top: 100px; */

Share this:

Subscribe for updates

Enter your email address below. I’ll send you updates & news to your email address. You can unsubscribe at any time.





6 responses to “How To Change The Front Page Panel Shaded Gradient In Twenty Seventeen”

  1. Bohumil Bartuněk avatar

    I need exactly this function .. but when paste this code to my CSS, then no changed on my web ….. WordPress 4.9.8 + Twenty Seventeen …

  2. Evy avatar

    Hi Bharat,
    Cannot be sure if this is the correct place, and my question could be a little tricky, but, in twenty seventeen theme, I liked the front page’s panel-parallax slide, and want to be able to use it in one of my sub-pages too in the site. I did manage to create a child theme, and did find out that the sub pages are shown with template-parts/page/content-page.php, and i know the id of the page which i want to show with panels, but what i couldn’t find out is how does the front page works… Therefore, i couldn’t apply front page’s sliding template to this particular one page… Is there a way you could point me out the solution?? Thanks a lot in advance,

    1. Bharat Karavadra avatar

      Hello Evy,
      What you are asking for may be a coding challenge for the Twenty Seventeen theme. If these sort of layout elements are required then I would recommend switching theme to a paid theme which could quite easily have the functionality and much more you are looking for, and for about $60 to $90 USD. It may cost at least that much to create the one customisation you are looking for. I use the Salient theme at the link below which has the ability to show wide panels (and too many others to list here). Take a look at it at:

  3. clickbert avatar

    Just the other day, I found your tutorial on how to change the Twenty Seventeen menu to full width. You still have that title on your site but you no longer have the info on how to do it. That title now refers to gradient. I had copied your CSS and everything worked fine but somehow, during a switch of plugins or something, all my custom CSS got wiped out. I had a backup but it was a little too old and did not include the CSS for making the menu full width. Can you please repost that. Thanks.
    (FYI, the site I’m working on is Thanks.

    1. Bharat Karavadra avatar

      Hello Ken,
      I accidentally overwrite the post. Thank you for pointing it out. I have re-created it at

Leave a Reply

Your email address will not be published. Required fields are marked *