0

I would like to export my gradient from Illustrator CS5. I know I can click each swatch individually, make a note of the colour and the percentage value and click on each handle to work out the value for that, but is there an easier or better way of doing this?

One concern I have is moving the swatch or handle by accident.

Ideally I'd like to be able to replicate the swatch in InDesign CS5 but also on websites and other programs.

What's the best way to achieve this?

my rose gold gradient

Note: although the angle shows as 0° I have put maybe a 43° angle on it. Not sure why it no longer shows.

Improve this question
9
  • Good answer. But then how would I export it? I need the colours values and positions so I can make a web based gradient right? – Eoin Aug 16 '18 at 20:16
  • And also save the swatch so I might import it to Photoshop or InDesign? – Eoin Aug 16 '18 at 20:16
  • I don't think that there is a way to copy "gradient properties" from Illustrator into Photoshop or InDesign, would be pretty cool if you could. – WELZ Aug 16 '18 at 20:35
  • 1
    My first thought was Colorzilla Gradient Editor... it has image import below the gradient editor. Never tried to import complex gradients tho.. no idea how well it handles those. Not sure if it fits your workflow. Since you mentioned Photoshop, there is an extension for it called: CSS Hat. PS does have it's own copy CSS function too. – Joonas Aug 16 '18 at 21:24
  • 1
    I thought I'd do a little testing between the 2 gradient editor web apps and their image imports. It seems Colorzilla is more liberal with the color- and opacity-stops but is way more accurate. I used a gradient with some low opacity stops and GradientFinder kept forgetting some stops leaving some parts translucent when they weren't supposed to be. And to paint a better picture of how liberal Colorzilla is with the stops... My 4 color stop and 4 opacity stop gradient was converted to CSS with 20 color stops and 15 opacity stops, but at least it was pretty accurate. – Joonas Aug 17 '18 at 7:03
2

I guess between Illustrator, Indesign and Photoshop, there isn't really a proper way to transfer gradients, because all of them handle gradients differently. I kinda don't understand this workflow where you need to do this, but I guess I would just copy & paste the object (or a layer) from one application to another.

Generating CSS (Gradient):

Improve this answer
4
  • There is no CSS Properties in Illustrator CS5. The same with Photoshop. It's a shame Colourzilla doesn't work with rotated gradients, but I guess if that's the only variable to work out then at least you have a fighting chance (although the hardest variable to work out). I can grab that easily from Illustrator. Great answer. – Eoin Aug 17 '18 at 11:19
  • @Eoin, Yea, I'm not sure if the Copy CSS feature was released in CS6. It is definitely in CC. CSS Hat 1 does support PS CS5, not sure about what features that had though. — You can always make your Radial gradient Linear, export that as an image and tell Colorzilla to make it a Radial CSS gradient. – Joonas Aug 17 '18 at 11:25
  • Joonas it is a linear gradient. It just has an angle on it. So it kind of goes from centre bottom left to centre top right. It's ok though, that's easy enough to work out just by looking at the angle. I think that was really the answer. – Eoin Aug 17 '18 at 12:54
  • 1
    @Eoin, right... I read what I wanted to read... Same thing though. you should import the gradient as perfectly vertical or horizontal and give it the angle later. This is something I didn't realize until now, but Colorzilla's gradient editor doesn't allow you to define a custom angle, but GradientFinder does. Of course, you can always edit the code it spews out..... – Joonas Aug 17 '18 at 13:01

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.