Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Create a radial gradient for Internet Explorer 6/7/8

Tags:

css

To create a linear gradient in Internet Explorer i used to adopt this (terrible) code:

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#282828', EndColorStr='#185976');

I wonder wether exists a way to create a radial gradient using filter and DXImageTransoform ?

like image 888
MatterGoal Avatar asked Aug 29 '11 12:08

MatterGoal


People also ask

Is it possible to use radial gradient in IE 6-9?

In fact, CSS gradients in general are problematic in old IE versions because CSS gradients are not supported in IE 9 or earlier. My normal solution to CSS gradients in IE 6-9 is CSS3Pie. However for radial gradients this isn't sufficient, because CSS3Pie doesn't currently support radial gradients.

How to create radial gradient in CSS?

CSS Radial Gradients. A radial gradient is defined by its center. To create a radial gradient you must also define at least two color stops. Syntax

Can I use gradient filter in Internet Explorer?

Internet Explorer gradient filter doesn’t support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr. Please note not all browsers support CSS gradient.

Which browsers are compatible with linear CSS gradients?

All desktop browsers including Internet Explorer 11 and Microsoft Edge provide browser support for Linear CSS Gradients, meaning these CSS Gradients offer excellent cross browser compatibility. The only exception that developers need to watch out for is IE6-9 and Opera Mini for which they need to perform cross browser testing.


1 Answers

Live Demo

#element{
    background: #fff; /* The color you want for the radial gradient */
    width:100px; 
    height:100px;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=0, style=2);
}

Link where I got the info

Radial Gradient

For the Radial Gradient we have to create a div-elements. This element is a Overlay for the background. Than we'll use the Alpha-Filter. Alpha will make this element transparent in a special style. style=2 is a radial alpha. This means that the center of the element will be full colored (opacity=100) and the opacity will lose to the edges (finishopacity=0)

like image 114
Loktar Avatar answered Sep 28 '22 10:09

Loktar