Skip to main content
Question

Two-color background CSS looks different in browser

  • April 21, 2025
  • 0 replies
  • 149 views

Margarita Klubochkina

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!

 

This topic has been closed for replies.