Gooey css effects with contrast parent

Question

I\'m trying to create gooey effect with CSS only (without svg). Everything goes right but my parent container has a contrast filter and I can\'t us

Answer 1

For this answer, I only had to make a change to the filter property

contrast(15) contrast(.5) sepia(1) brightness(1.85) hue-rotate(319deg) saturate(3.45)

• First, we set the contrast to 15 (20 made the edges a little too hard, if you ask me)
• Then we set it back to .5 (Yes, you can stack these things)

So now we have a lightgray background and darkgray blobs

• Apply sepia (which gives it a color)
• Add 1.85 brightness (now the background is white again, and we have colored blobs)
• hue-rotate to get to the right hue
• saturate to give it its saturation

The last three properties in the list are essential for getting the right color. Your goal is rgb(255, 113, 93). With this line applied, the colors are rgb(255, 115, 94)

You can see it work in this Fiddle

As a sidenote. You can also stack transforms, which means that if you want to center the blobs, you won't have to use negative margins, but use the translate(-50%, -50%) trick. Then when you hover over them, you can simply stack the transforms like this translate(-50%, -50%) translateX(-70px)