Convert svg linear-gradient to CSS linear-gradient (Adobe XD)

by

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>

Answer

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.

Attribution
Source : Link , Question Author : ffritz , Answer Author : Josephus Paye

Leave a Comment