: How to extract gradient css code from an AI design I have been given a design for a web page made in Adobe Illustrator. What I would like to do is to convert the gradient inside the design

@Gail6891361

I had this script lying around, use at own risk:
#target illustrator

(function() {
var doc = app.activeDocument;
var str = '';
for(var i=0; i < doc .gradients.length; i++) {
var gradient = app.activeDocument.gradients[i];
str += gradient.name+ ':n';
str+= gradientStopsToStr(gradient);
}
showCopyableDialog(str);
})();

function showCopyableDialog(str){
var w = new Window ('dialog');
p1 = w.add ('edittext {preferredSize: [600, 400], properties: {multiline: true}}');
p1.text = str;
w.show ();
}

function gradientStopsToStr(gradient){

if (gradient.type == GradientType.LINEAR)
retval = ' linear-gradient(0deg, ';
else
retval = ' radial-gradient(Circle, ';
for(var i=0; i < gradient.gradientStops.length-1; i++) {
var stop = gradient.gradientStops[i];
retval += rgbaToStr(stop.color, stop.opacity)+ ' '+stop.rampPoint+'%, ';
}
var stop = gradient.gradientStops[gradient.gradientStops.length-1];
retval += rgbaToStr(stop.color, stop.opacity)+ ' '+stop.rampPoint+'%)';
retval += 'n'
return retval;
}

function rgbaToStr(color, opacity){
retval = ' rgba(';
if(color instanceof RGBColor){
retval += color.red
+ ', ' + color.green
+ ', ' + color.blue
+ ', '+ opacity/100 +')';
}
return retval;
}


The script iterates all swatches (yes that means all used gradients need to be added to swatches) and generates css for each. Then pops up a windows with a dialog you can copy paste somewhere for further refinement

Vote Up Vote Down