Is it a good practice to use a CSS Gradient for my website background?

Hi everyone,

I am considering using a CSS gradient for the background of my website, and I wanted to get some feedback on whether it's a good practice. Here's the CSS code I'm using for the background:


background: rgb(166,36,78);background: -moz-linear-gradient(90deg, rgba(166,36,78,1) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(166,36,78,1) 100%);background: -webkit-linear-gradient(90deg, rgba(166,36,78,1) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(166,36,78,1) 100%);background: linear-gradient(90deg, rgba(166,36,78,1) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(166,36,78,1) 100%);filter: progidXImageTransform.Microsoft.gradient(startColorstr="#a6244e",endColorstr="#a6244e",GradientType=1);
I’m specifically wondering:

1. Is it efficient to use gradients like this for backgrounds, especially with the browser prefixes for compatibility?
2. Does this gradient code impact the performance of the page load time, or are there better alternatives?
3. Is there any issue with supporting older browsers using the filter for Internet Explorer?

Yes, CSS gradients are good. Just make sure to add a background-color: #something; this will be used as backup if browser for some reason doesn’t allow the gradient

Only if you know how to use gradients and set your radiance correctly. If not plain colors are advised

Yes, if you know how to use your gradients

Ofcourse this is good. Also notice that you have a
background:somecolor
in the first line. That acts like a fallback for old browsers, where only a single color will be shown. This is a good practice although I think old browser users should probably stick to pagers.

This is perfectly fine, you can even add a color change gradient if you want the background to move around like a lava lamp

They won't increase your conversion and generally are a bad practice from a marketing perspective. You can do this but generally you're wasting your time on making things pretty which are better left less distractive.

Gradients are fine for backgrounds, modern browsers handle them smoothly.