1

I'd like to import a gradient in CSS (from this site http://gradientcreator.com) I tried through the "CSS Properties" panel but I can not edit. I edited SVG in notepad by putting CSS, but when I open the file in Illustrator the backgroud turns black. Thank you.

<?xml version="1.0" encoding="utf-8"?>


<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
<style type="text/css">
.colorful { background: -webkit-linear-gradient(45deg, hsl(273, 95%, 74%) 0%, transparent 70%),                             
                        -webkit-linear-gradient(135deg, hsl(34, 100%, 74%) 10%, transparent 80%),
                        -webkit-linear-gradient(225deg, hsl(63, 96%, 68%) 10%, transparent 80%),
                        -webkit-linear-gradient(315deg, hsl(29, 93%, 70%) 50%, transparent 100%);
            background: -ms-linear-gradient(45deg, hsl(273, 95%, 74%) 0%, transparent 70%), 
                        -ms-linear-gradient(135deg, hsl(34, 100%, 74%) 10%, transparent 80%),
                        -ms-linear-gradient(225deg, hsl(63, 96%, 68%) 10%, transparent 80%), 
                        -ms-linear-gradient(315deg, hsl(29, 93%, 70%) 50%, transparent 100%); 
            background: linear-gradient(45deg, hsl(273, 95%, 74%) 0%, transparent 70%), 
                        linear-gradient(135deg, hsl(34, 100%, 74%) 10%, transparent 80%), 
                        linear-gradient(225deg, hsl(63, 96%, 68%) 10%, transparent 80%),
                        linear-gradient(315deg, hsl(29, 93%, 70%) 50%, transparent 100%); } 


</style>
<g id="colorful">
<rect x="0.5" y="0.5" class="st0" width="1919" height="1079"/>
<path d="M1919,1v1078H1V1H1919 M1920,0H0v1080h1920V0L1920,0z"/>
</g>
</svg>
2

You can not, the program does not have that kind of gradient primitive.

0

You can import gradient as svg gradient, it rather tricky but it works:

  • create svg gradient with some online tool that allows to generate svg code, for example http://angrytools.com/gradient/
  • copy svg code and save it to file with svg extension.
  • open illustrator->File->Place and choose svg file with gradient, gradient will be imported and applied to rectangle.
  • create new gradient swatch: select rectangle with this gradient and drag the gradient fill from the Fill box in the Gradient Tools panel or Color panel to the Swatches panel.
  • Thanks for the reply, Very interesting this site angrytools mainly because it converts the code to SVG, I see that it is not possible to paste the code CSS into the tool, you know some website that this would be possible?. Thank you. – Rogerio Marcos Mar 30 '17 at 18:09
  • yes, i just search in google and found kmhcreative.com/downloads/CSS2SVG.htm – emax Mar 30 '17 at 18:21
  • svg also does not have angular gradient, but there are some workaround: stackoverflow.com/questions/2465405/svg-angular-gradient – emax Mar 30 '17 at 19:09
  • Please, vote up answer instead of 'thanks' :) – emax Apr 1 '17 at 17:39

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.