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. http://colorhunt.co 
Color Hunt - Color Palettes for Designers and Artists

Color Hunt is a free and open platform for color inspiration with thousands of trendy hand-picked color palettes

http://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. https://uigradients.com/ 
Handpicked beautiful color gradients

uiGradients is a handpicked collection of beautiful color gradients for designers and developers.

https://uigradients.com/
You can also generate your own gradient if you're more choosy like me😂

5. https://cssgradient.io/ 
CSS Gradient — Generator, Maker, and Background

As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.

https://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 👇🏼
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
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
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 https://www.blobmaker.app/  to create random shapes

7.
Blobmaker - Make organic SVG shapes for your next design

Make organic SVG shapes for your next design. Modify the complexity, contrast, and color, to generate unique SVG blobs every time.

https://www.blobmaker.app/
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 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 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 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.
You can follow @Prathkum.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled:
Those who think consciousness raising & movement building are disconnected, or even a distraction from electoral politics have not paid attention to the history of social change.In this thread, we
Read more
The 2020s will be known as the Remote Work decadeA few predictions of what is likely to emerge[ a thread ] Third Space: Office and Working from Home will
Read more
1/29: Have you ever had a concept explained to you that helps frame complex issues you’ve been wrestling with and opens your eyes to new possibilities? A concept that I
Read more
By continuing to use the site, you are consenting to the use of cookies as explained in our Cookie Policy to improve your experience.