Radial gradient generates broken CSS
Illustrator CC 22.1. To reproduce, create a rectangle with fill set to any radial gradient. Name the rectangle, open CSS Properties window. Observe the generated CSS:
.GradientBox
{
background : -moz-radial-gradient(50% 50%, circle farthest-corner, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
background : -webkit-radial-gradient(50% 50%, circle farthest-corner, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
background : -webkit-gradient(radial,50% 50% ,0 , 50% 50%, 272.12 ,color-stop(0,rgba(255, 255, 255, 1) ),color-stop(1,rgba(0, 0, 0, 1) ));
background : -o-radial-gradient(50% 50%, circle farthest-corner, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
background : -ms-radial-gradient(50% 50%, circle farthest-corner, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Stlye=2);"
background : radial-gradient(50% 50%, circle farthest-corner, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
border-style : Solid;
border-color : #000000;
border-color : rgba(0, 0, 0, 1);
border-width : 1px;
filter: progid:DXImageTransform.Microsoft.Alpha(Stlye=2);
}
There are 3 problems here:
- On line 8 of the CSS (the legacy IE -ms-filter rule), the semicolon is inside the double quotes instead of outside, making it invalid.
- In the legacy IE "-ms-filter" and "filter" rules, lines 8 and 14, Style is misspelled as "Stlye".
- How would an alpha filter be equivalent to a radial gradient in legacy IE versions in the first place?
Thanks!