Thread by @Prathkum

Yesterday I invented a new design concept I named "Dropmorphism" 😂

Let's see how I made it👇

THREAD🧵

🚨 The heart of this art is box-shadow and border-radius

I created the shape of drop using Fancy border generator👇

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

Now you a drop 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

- Well it does not look like a drop. So how do we make it?

- We will use pseudo-elements for adding volume(Layers) in our 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

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

- Reduce opacity

Drop the link of your creations below. I'm more than happy to check it out

Final Output👇

That's pretty much it. I hope you like it❤️
I'll catch you with the next thread. Until then, keep coding😎

SOURCE CODE:

codepen.io/prathamkumar/p…

—> Have* <—