W3C home > Mailing lists > Public > www-style@w3.org > June 2011

RE: [css3-image] gradients from color to full alpha transparency (was Re: [CSS3] support for linear-gradients & radial-gradients)

From: Brian Manthos <brianman@microsoft.com>
Date: Sun, 26 Jun 2011 20:29:55 +0000
To: Alan Gresley <alan@css-class.com>, CSS 3 W3C Group <www-style@w3.org>
CC: Tab Atkins Jr. <jackalmage@gmail.com>
Message-ID: <9710FCC2E88860489239BE0308AC5D1705F98F@TK5EX14MBXC266.redmond.corp.microsoft.com>
> From: Alan Gresley [mailto:alan@css-class.com]
> The crux of the propose change is that <color> to 'transparent' will
> not
> behave as <color> to rgba(0,0,0,0) (the current behavior of 1E10,
> Gecko,
> WebKit and Opera) but from <color> to rgba(255,255,255,0) which is the
> behavior that IE10 has for such gradients. Also the current gradient
> from <color> to rgba(0,0,0,0) are supposed to be changed, thus my half
> life gradient scaling.

Transparent white has problems as well.

In the example below, only boxes D and H have the desired premultiplied-interpolation-like rendering (in IE 10 Preview 1).
- A, E, C, and G are too light.
- B and F are too dark.


<meta http-equiv="X-UA-Compatible" content="IE=10"/>
table {
	border: 1px solid red;
	color: black;
	font-size: 48pt;
td {
	border: 1px solid blue;
	width: 50px;
	height: 100px;
tr:nth-child(2n) {
	background-color: black;
	color: white;
td:nth-child(1) {
	background-image: -ms-linear-gradient(red, transparent);
td:nth-child(2) {
	background-image: -ms-linear-gradient(red, rgba(0,0,0,0));
td:nth-child(3) {
	background-image: -ms-linear-gradient(red, rgba(255,255,255,0));
td:nth-child(4) {
	background-image: -ms-linear-gradient(red, rgba(255,0,0,0));
Received on Sunday, 26 June 2011 20:30:25 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:47 UTC