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!
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!
