Is there a way to use CSS3 gradients and fallback to a PNG?

Question

Hi,

How would one use CSS3 gradients for a background image, and fallback to a PNG image if the gradients were not supported?

Answer 1

Here you go.

Browser who do not support CSS3 gradients will just use the image.

div {
            background-color: #1a82f7; /* fallback color */
            background-image: url(images/linear_bg_2.png); /* fallback image */
            background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
}

Blog post about it on CSS Tricks

Answer 2

try this online:::

http://www.display-inline.fr/projects/css-gradient/

Answer 3

also have a look here: http://leaverou.me/2009/03/check-whether-the-browser-supports-rgba-and-other-css3-values/