Footer Gradient

The gradient is actually a shadow which is done from this:

@media (min-width: 68em) {
.content-area {
    -webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.2);
    box-shadow: 0 0 30px 0 rgba(0,0,0,0.2);
}
}

To cancel that out, you would do this:

@media (min-width: 68em) {
.content-area {
    -webkit-box-shadow: none;
    box-shadow: none;
}
}

Having alternate footer background colours is a bit more trickier and requires overriding the theme’s colour settings and also using media queries.

Example, for black on small screens then white on larger:

@media (min-width: 20em) {
#footer-wrapper {
   background-color: #000;
   }
}

@media (min-width: 68em) {
   #footer-wrapper {
   background-color: #fff;
}
}

You might have to try different min-widths on the media queries to get it right. The 68em size is for desktops and the 20em is for mobile devices. You would also have to override the text colour for footer menu links, social icons and copyright text as well with the above code. Overall, this is going to be some work involved to get that capability. This means you won’t be able to use the customizer colour settings for the footer elements.