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