Translating Illustrator's "color burn" to an SVG div in CSS

[donutsauce]

I’m trying to add a double gradient to a long, skinny div (SVG) in order to give it the appearance of roundess. Think of a telephone post and how it would get darker on the outside.

Using an opacity mask in Illustrator just desaturates and washes the image out instead of darkening it and making it look shaded on the sides. Using the “color burn” option in the transparency tab creates the desired effect but it doesn’t translate or something. When I save it, it looks washed out just as it would as an opacity mask.

Does anyone have a solution or workaround in either Illustrator or CSS itself? The image is a vector and it needs to remain that way otherwise I’m sure this would be a ton easier…

EDIT:
Added screen shots.
What I have
What I want
What happens

[chrisburton]

Screenshot?

[donutsauce]

posted ’em just now.

[chrisburton]

What about separating the trunk and the lines?

[BionicClick]

look, I think your over thinking this? you dont need any special things like color burn etc. simply place a colored gradient over top of your “tree” dark brown/tan lines that gives the appearance of the initial image but with a gradient that makes it look like the last one you gave to use…. this gradient would be red/black/yellow/white and when overlaid on the simple image you get the final one. then your export will work as intended. as color burn export is not a supported part of svg output in illustrator apparently.

[Author]

Posts