How to change or remove the linear gradient Altitude Pro adds to front page images

Altitude Pro is a very popular child theme for the Genesis Framework by Studiopress.

It has been the second best-selling Studiopress child theme for 11 of the last 12 months (one month it was the third best-selling child theme).

A frequent question on the Studiopress Forum is how to change or remove the linear gradient, or the “dark layer” or the “overlay opacity”, of the images on the Altitude Pro front page.

Altitude Pro front page images with linear gradient:

Altitude Pro front page images without linear gradient:

How to remove the linear gradient from Altitude Pro’s front page images

This is the easier option.

If you want to remove the linear gradient Altitude Pro adds to the front page images, you have to delete all the linear gradient values from the style.css around line 1250.

Afterwards, selector and declaration block should look like this:

.image-section {
    display: table;
    overflow: hidden;
    table-layout: fixed;
    width: 100%;
}

How to change the linear gradient Altitude Pro adds to front page images

You might not want to get rid of the linear gradient completely but just want to adjust how dark or light the images appear.

You have to change the values of the linear gradient Altitude Pro sets in the style.css (around line 1250).

Altitude Pro uses the following values:

background: -moz-linear-gradient(top,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.5)), color-stop(80%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.9)));

background: -webkit-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);

background: -o-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);

background: -ms-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);

background: linear-gradient(to bottom,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );

I know it looks a bit complicated. And finding just the right lightness or darkness will most likely require some experimenting.

Luckily, there are some great resources available online. Those gradient generators or editors allow you to see the effects of changes to the linear gradient right away.

Here is a small selection of online gradient editors or generators:

http://www.colorzilla.com/gradient-editor/

http://www.css3factory.com/linear-gradients/

http://www.cssportal.com/css-gradient-generator/