Thread by @Prathkum

Step by step guide to create this drop using CSS 💧 🧵

This drop looks tough to create but trust me its super easy and fun.

The heart of this art is border-radius and box-shadow properties. If sounds good, continue reading.... 👇🏻

First thing first, we need to create a distorted shape so that it will looks like a drop.
We can create this shape using border-radius property only.

Here's a tool if you find some difficulty making this drop shape

🔗 9elements.github.io/fancy-border-r…

Now drop is ready, We are good to go.

- Create a blue background and centralize your drop

- Add some opacity and border of almost same shade.
- Adding a border of approximately the same color will not be visible at a glance, but it will add some sort of volume to your drop

- Add a layer using ::before pseudo-element
- Height, width and border-radius should be same as drop
- Background color should be same as body color
- Add some dark blue shadow in order to give it a 3d look

- Extend the same shadow
- Now add four layers of inset shadows

1. Blue inset shadow at right side
2. Blue inset shadow on top
3. White inset shadow at bottom-left
4. White inset shadow at bottom-left with large intensity

- CSS code for shadows mentioned in above tweet 👆🏻

- Now will create a small white reflection using ::after pseudo-element.
- Create a blob and align it above the white intensity as shown in the given image below

Final Step

- Create another small white reflection using box-shadow of ::after-element
- Reduce opacity

Great! This is pretty much it. Wasn't it easy and simple?

Share a screenshot of your creation below. Try it with different color scheme. Let's see how it goes 😉

Check out the full source code here:

codepen.io/prathkum/pen/x…