How to create Glassmorphism Calendar using CSS ?

Last Updated : 19 Jul, 2021

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 opcaity.
Black Shadow with low opacity and high blur radius.
Add blur effect behind the glass using 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 in to column in a Calendar container
You can add some shapes like circle over which you can place your virtual glass Calendar so that it look 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.

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