Thread by @Prathkum

Hey👋🏼

Do you like my new Twitter header that I just created using CSS? If yes this thread is for you😄

I implemented GLASSMORPHISM which is a latest emerging trend in designing. You can also create one it's pretty easy.
Let's see

THREAD 🧵

In this thread you will find

- Code snippets
- Outputs
- Resources
- and some other stuff related to this

2.

Create a container div of height 500px and width 1500px.

Pick a color for background either light or dark. You can pick a color by your choice from here

3.
colorhunt.co

You also also create gradient image for your background. This gives your design even more appealing look

Pick a beautiful gradient from here

4.
uigradients.com

You can also generate your own gradient if you're more choosy like me😂

5.

cssgradient.io

6.

You need some shapes like circle, triangle, square, or some random shapes over which you can place your virtual glass.

Don't worry if you don't know how to create shapes using CSS.
These code snippets will help you 👇🏼

You can also use blobmaker.app to create random shapes

7.

Now you are all set to create a virtual glass. Make sure if your background is light then glass will be dark and vice-versa.

You can create a glass using few lines of code.

8.

Now you have shapes and glass last and final task is to position them correctly.

Make sure half part of the shapes can be seen from above the glass so that your glass look more appealing

9.

Woah!🎉 You have implemented your first glassmorphism design in less then 10 minutes I guess😍

Share your creations below. I love to check them out

10.

Link of final output😊

@CodePen
codepen.io/prathamkumar/p…