Wordpress / Custom Footer - wordpress-theming

Question

I'm new to WordPress. We have bought one of the themes and I have being trying to add a gradient to our footer. The theme provides a custom CSS option, but when I add this code to custom CSS and save it I don't see any changes.
This is the code I added to my footer:
.footer {
background: #87e0fd;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg3ZTBmZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM4JSIgc3RvcC1jb2xvcj0iIzNmOTNiNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMTJlM2EiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #87e0fd 0%, #3f93b5 38%, #012e3a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(38%,#3f93b5), color-stop(100%,#012e3a));
background: -webkit-linear-gradient(top, #87e0fd 0%,#3f93b5 38%,#012e3a 100%);
background: -o-linear-gradient(top, #87e0fd 0%,#3f93b5 38%,#012e3a 100%);
background: -ms-linear-gradient(top, #87e0fd 0%,#3f93b5 38%,#012e3a 100%);
background: linear-gradient(to bottom, #87e0fd 0%,#3f93b5 38%,#012e3a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#012e3a',GradientType=0 );
}

Answer 1

It's a little hard to give you an accurate answer based on such limited information, but I will try nonetheless.
Your CSS is valid. I've thrown together a quick test, and it seems to be working in both Firefox as well as Chrome. So you're good there.
The most common problems and their solutions:
Mixing up ID's and Classes: You are using the class 'footer', indicated in CSS by the dot at the beginning. Chances are the footer is using an ID, which is written with a hash. You can change the selector to #footer.
The footer is empty: If an element in HTML is empty, it causes the element to be zero pixels in height, which effectively makes it invisible. Add and adapt the following to the second line of your CSS: height: 256px;