Skip to main content
Question

Two-color background CSS looks different in browser


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: 

https://www.figma.com/design/c1pdYlYvb3clP6Vv9PVomT/Opacity?node-id=0-3&t=mo0PgKICfCwI9tAC-1

 

 

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!

 

0 replies

Be the first to reply!

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings