Skip to content

Implement RGBA for linear-gradient colors #7

lojjic opened this Issue May 21, 2010 · 4 comments

3 participants

lojjic commented May 21, 2010

While RGBA colors are currently accepted when parsing linear-gradient values, they are always rendered with 100% opacity. This is because VML does not support per-stop opacity.

VML does allow a single 'opacity' attribute on the fill, however it appears that for linear gradients this is always applied so that the color at the start of the shape (not necessarily the first color-stop) is fully opaque and the color at the end of the shape has the specified opacity. The MSDN documents talk about an opacity2 attribute but it appears this only works in MSOffice.

To make per-stop opacity work will take some serious work, if it's even possible. The only thing I've been able to come up with is to draw each color-stop segment as a separate shape element; each shape would have the 'opacity' fill attribute and/or an alpha filter applied to achieve the correct opacity on each of its ends. These shapes would then be stacked next to each other to build the full shape. This could get very tricky in certain situations, such as when one of the stops extends through a rounded corner.

Other ideas are very welcome.

We could probably hit a good percentage of the use cases if we limited RGBA rendering to only gradients with 2 colors in a vertical or horizontal orientation where the stops are at the edges of the box.

lojjic commented Nov 13, 2011

Commit 7e02823 adds preliminary support for gradient opacity. Currently it is limited to gradients with only two stops; more complete support will hopefully be coming soon.


Even support for 2 stops is a huge improvement. When will this change be integrated into pie.js and released?

asgh commented Feb 22, 2013

I tried this out, and it mostly works, but it ignores the position of the stop, it always start at the edge of the background. Is this known? Because I don't see any mention of it in the docs. (Just background-position which is something else).

lojjic commented Feb 22, 2013

@asgh You're right, it only works from edge to edge. I should have been more clear about that -- internally when you set a stop position that's actually the same as adding an additional stop. For example linear-gradient(red 25%, blue 75%) is the same as linear-gradient(red 0%, red 25%, blue 75%, blue 100%) so it doesn't really count as two stops unfortunately.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.