Kevin Powell - Community•2mo ago

Need help with crazy designer requirement (blending opacity colors)

Hey guys, I have one really interesting feature that I have been trying to implement for quite some time now and I would appreciate the help. The client and designer want to have these galaxy-like animations that will move around and create fancy effects. However, I have a big problem implementing this in CSS, due to how semi-transparent colors are mixed. When you stack two elements with semi-transparent backgrounds, on overlapped areas the color is brightened. I have tried various approaches like box-shadow, radial-gradient, playing with opacity, blur... nothing suits this design. Do you have any ideas on how I can tackle this requirement? Here is the source code for my best attempt: https://codepen.io/Invalid-Solutions/pen/PovpLOP (sizes and rotations are according to design) Thank you so much for your attention and participation!

8 Replies

Jochem•2mo ago

You probably want to take a look at mix-blend-mode

kristijan97•2mo ago

I took a look there too, nothing useful :/

MarkBoots•2mo ago

as they are larger than the content box's, there surely is some blur added this is in figma right? you should be able to see what props are used

kristijan97•2mo ago

Yeah, that caught my attention too, but Figma doesn't tell anything about that. There is only size/position/roration. Only on element which is grouping says opacity: 50%

MarkBoots•2mo ago

are you able to share the file? hm, i think it is protected in dev mode, team only otherwise, don't hasitate to ask the designer if something is not clear. nothing wrong with that

kristijan97•2mo ago

I guess that we will need to have chat in "3 eyes" lol 😄 Thanks for checking bro!

MarkBoots•2mo ago

i think you have to use it as an svg image. there are some filters used that are not custom for css only

<svg width="807" height="1139" viewBox="0 0 807 1139" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5" filter="url(#filter0_f_91_177)">
<ellipse cx="496.576" cy="642.279" rx="294.96" ry="101.597" transform="rotate(-45 496.576 642.279)" fill="#A9F7FF"/>
<ellipse cx="758.908" cy="534.75" rx="218.27" ry="150.757" transform="rotate(-45 758.908 534.75)" fill="#D7F3F6"/>
<ellipse cx="629.876" cy="547.573" rx="287.191" ry="47.0231" transform="rotate(-70.7948 629.876 547.573)" fill="#FFAF51"/>
</g>
<defs>
<filter id="filter0_f_91_177" x="0.626495" y="0.620636" width="1221.17" height="1137.61" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="137.648" result="effect1_foregroundBlur_91_177"/>
</filter>
</defs>
</svg>

<svg width="807" height="1139" viewBox="0 0 807 1139" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5" filter="url(#filter0_f_91_177)">
<ellipse cx="496.576" cy="642.279" rx="294.96" ry="101.597" transform="rotate(-45 496.576 642.279)" fill="#A9F7FF"/>
<ellipse cx="758.908" cy="534.75" rx="218.27" ry="150.757" transform="rotate(-45 758.908 534.75)" fill="#D7F3F6"/>
<ellipse cx="629.876" cy="547.573" rx="287.191" ry="47.0231" transform="rotate(-70.7948 629.876 547.573)" fill="#FFAF51"/>
</g>
<defs>
<filter id="filter0_f_91_177" x="0.626495" y="0.620636" width="1221.17" height="1137.61" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="137.648" result="effect1_foregroundBlur_91_177"/>
</filter>
</defs>
</svg>

kristijan97•2mo ago

Thanks for the idea, I will check it out!

Gaming

Programming

Need help with crazy designer requirement (blending opacity colors)