How would the CSS values of these parameters:

enter image description here

Look like in CSS? I'm curious if there is way to convert these values also for future projects.


You can extract CSS straight from Illustrator... though I think it may be limited to the CC version.

Select the object and go Window > CSS Properties

enter image description here

Now if you want to save this drop shadow in illustrator, you can drag the object with the shadow into the Window > Graphic Styles panel. The contents of this panel are not global in the sense that if you open a new document, that graphic style won't be there. After adding a new graphic style, you need to save the graphic library (fly-out menu in the panel) and load it in future projects.


What about using an online shadow generator like this one html-css-js.com, has exactly the same parameters:

enter image description here

-webkit-box-shadow: 0px 0px 6px 5px rgba(0,0,0,0.3); 
box-shadow: 0px 0px 6px 5px rgba(0,0,0,0.3);

Another option: css3studio.com

enter image description here

/*start ------------*/
width: [object Object]px; 
height: [object Object]px; 
background: #F8F8F8; 
border: solid #BDBDBD 1px; 
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3)  ; 
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3)  ; 
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3)  ; 
  • 1
    This is not directly related but there is a little editor in the Chrome dev tools. Doesn't add vendor prefixes but it can make it easier to adjust shadows: image – Joonas Jan 7 '19 at 9:36

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.