Figma Support Forum

How can I recreate mix-blend-mode: hard-light outside of Figma and keep the golden glow?

I have created an ellipse on top of a text element to create a glowing sun effect in Figma. I want to recreate this outside of Figma but I’ve hit a wall there I think, it lacks the glow, it’s too dark and doesn’t shine :slight_smile: .

This is what it looks like in Figma:
Screenshot 2021-06-11 at 12.39.58

It has these properties:

position: absolute;
width: 212px;
height: 212px;
left: 582px;
top: 244px;

background: linear-gradient(204.36deg, #B6BFDA 19.46%, #DD9AA5 71.62%);
mix-blend-mode: hard-light;
filter: blur(4px);

I tried making the most basic div with the same background like so:

<!DOCTYPE html>
<html lang="en">
  <link rel="stylesheet" href="style.css" />

  <body>
    <h1>Testing testing testing testing</h1>
    <div class="sun-large"></div>
  </body>
</html>
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(224, 243, 255, 0.8) 0%,
    rgba(233, 240, 232, 0.8) 42.05%,
    rgba(238, 243, 247, 0.8) 60.74%,
    rgba(229, 218, 232, 0.8) 76.51%,
    rgba(181, 195, 230, 0.8) 101.62%
  );
}

h1 {
  position: absolute;
  font-size: 64px;
  max-width: 400px;
}

.sun-large {
  width: 212px;
  height: 212px;
  border-radius: 50%;
  background: linear-gradient(204.36deg, #b6bfda 19.46%, #dd9aa5 71.62%);
  mix-blend-mode: hard-light;
  filter: blur(4px);
}

This is what it looks like in Chrome
Screenshot 2021-06-11 at 12.38.55

I tried exporting an SVG from Figma and open it in Adobe Illustrator and then adding mix-blend-mode and filter to it and this looks closer to it.
Screenshot 2021-06-11 at 12.43.47

Does Figma add something more or have I missed how it works?

I’ve also tried to do it with an SVG in the code, but it quickly became very complex. I’m also wary since it would not be supported by Safari according to this MDN article. I’ve tried to move the sun around to see if the green background somehow affected how light it became but it did not.

Any help much appreciated :slight_smile:

Solved it by setting the background-color to white as well