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.
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:
- Extract the CSS from Adobe XD somehow. Is this possible?
- Convert the
linearGradienttag 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>
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
- Calculate the slope angle using the
- Find all
<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.
Source : Link , Question Author : ffritz , Answer Author : Josephus Paye