Skip to main content

Hello,

I have a button that has two-color fill and a background blur effect using `background-blend-mode: color-dodge`.

 See the example Figma draft: 

 

 

When I copy CSS of this element, the background is exported like `background: linear-gradient(0deg, #383838, #383838), rgba(179, 179, 179, 0.82);`.

 

See codepen example using the exported styles: 

 

 

The resulting element has no opacity because of the first `linear-gradient`. It seems that the browser only blends the two button backgrounds, whereas Figma blends them together with the page background. How can I export CSS for elements like this so that they look exactly the same as in Figma?

Thank you!

 

Be the first to reply!

Reply