5

I was given an Adobe .xd file for a website, which needs to be created in WordPress. Part of the design are linear-gradients (as borders of images for example). My problem is, that I can't seem to find an option for "extracting" the corresponding css from these elements.

An example:

enter image description here

Now, I want the CSS that describes this bottom border, which is a linear-gradient with an angle. I can get the hexcodes for the colors, but not the angle, nor do I know if there are stops and where.

The options I see are:

  1. Extract the CSS from Adobe XD somehow. Is this possible?
  2. Convert the linearGradient tag from the exported SVG file to css. How can this be done?

The linear gradient tag from the SVG of the exported bottom border is the following:

<linearGradient id="linear-gradient" x1="1.089" y1="-3.5" x2="-0.775" y2="2.611" gradientUnits="objectBoundingBox">
  <stop offset="0" stop-color="#ac2284"/>
  <stop offset="1" stop-color="#003bff"/>
</linearGradient>
1
  • Looks like you just need to get the degree of the slope in this string of attributes: x1="1.089" y1="-3.5" x2="-0.775" y2="2.611" ---- Then you can put them into this format for css: background: linear-gradient(0deg,red,yellow,green);
    – Silly-V
    Mar 26, 2018 at 15:30

1 Answer 1

11

I needed to convert <linearGradient> from many SVG files to CSS, and I made this: https://codepen.io/JosephusPaye/pen/vbaxBa?editors=0010.

Paste an SVG source and it'll extract all the <linearGradient>s and convert them to CSS.

How it works, in summary:

  • Parse the input as an SVG document
  • Find all <linearGradient>s
  • Calculate the slope angle using the x1, x2, y1 and y2 attributes
  • Find all <stops> in the <linearGradient> and extract the offset, color and opacity
  • Use the extracted angle and stops to generate a CSS gradient

See the source for more details.

4

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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