How can I create the same effect with Illustrator as with following CSS:

background: linear-gradient(#5d7aa4, transparent) fixed,
            linear-gradient(-45deg, #ff0068, transparent) fixed, 
            linear-gradient(45deg, #00ecff, transparent) fixed;

background-blend-mode: multiply;

See: https://jsfiddle.net/eycspbt9/

I tried to create 3 overlapping elements with same gradient, opacity and blend mode settings, but it doesn't look same. What am I missing?

  • Adding a screenshot of your attempt in Illustrator would help
    – Cai
    Apr 24 '17 at 18:29

Simple Blue to Blue linear Gradient....

enter image description here

Add a new fill via the Appearance Panel and set the new fill to be the purple gradient 100% to Transparent...

enter image description here

Then to adjust the angle of the purple gradient, grab the Gradient Tool and click-drag from the bottom right corner upwards....

enter image description here

Or just enter "135" in the angle field for the gradient (matches the 45°/-45° "to top" gradient angle in CSS.. but not necessarily the gradient length)....

enter image description here

That should get you close...

enter image description here

Adjust further as desired.

Chances of you exactly matching CSS blend modes and settings in any image editing application are somewhat minimal. CSS does it's own browser-specific translations. In addition, coordinates are always window or parent object specific with CSS, so gradient lengths can easily change in CSS (this is the biggest difference). This also can result in angles appearing different even if they are still set to the same degree.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.