How to create Glassmorphism Calendar using CSS ?
In this article, we will see how to create a calendar using glassmorphism effects in CSS & will understand its implementation through the example. You can easily create Glassmorphism Calendar using Glassmorphism UI design which is the latest emerging trend in designing. It is a modern way of styling web elements of any web page and providing a 3D as well as a glass effect. To create any Glassmorphism Calendar, you just need to follow the basic steps which are given below further in this article.
Note: In order to create a glass-like container you just need to remember 3 things.
- White Background color with almost zero opacity.
- Black Shadow with low opacity and high blur radius.
- Add blur effect behind the glass using a backdrop-filter property.
Approach: Follow the below steps to create Glassmorphism Calendar using CSS.
- Create a basic structure for calendar like create a calendar-container div of height 400px and width 400px.
- Create a gradient image for your background.
- Place the day, month, year, date into a column in a Calendar container
- You can add some shapes like a circle over which you can place your virtual glass Calendar so that it looks like the shape is placed under the glass.
- Add a low opacity white background color for Calendar and Calendar Body.
- Add a box-shadow, it will add a 3-d effect to the glass.
- Add low opacity and large blur black shadow.
Example: The following is the complete code to implement the Glassmorphism Calendar using the above steps.
HTML
<!DOCTYPE html><html> <head> <style> body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient( to right, #000428, #004e92); } .calendar { position: relative; width: 260px; } .calendar .calendar-body { display: flex; justify-content: center; align-items: center; flex-direction: column; font-size: 30px; transform: translate(-50%, -50%); width: 400px; height: 400px; background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.1); box-shadow: 30px 30px 40px rgba(0, 0, 0, 0.2); border-radius: 80px; backdrop-filter: blur(10px); } .circle { width: 150px; height: 150px; border-radius: 50%; background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045); position: relative; left: 170px; top: 50px; } .month { color: #fff; background: green; width: 100%; font-size: 1.7em; text-align: center; padding: 5px 0; } .day { color: #fff; font-size: 1.4em; margin-top: 20px; } .date { color: #fff; font-size: 6em; margin-bottom: 20px; } .year { color: #fff; font-size: 1.2em; margin-bottom: 20px; } </style></head> <body> <div class="calendar"> <div class="circle"></div> <div class="calendar-body"> <span class="month">August</span> <span class="day">Thursday</span> <span class="date">17</span> <span class="year">2021</span> </div> </div></body> </html> |
Output:
Supported Browsers:
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari
Please Login to comment...