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 🙂 .
This is what it looks like in Figma:
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
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.
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 🙂