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...