https://github.com/migrim/glassmorphism-clock

This project is a digital clock designed with a glassmorphism style. I created this project to learn and explore the glassmorphism design trend
https://github.com/migrim/glassmorphism-clock

frosted-effect frosted-glass glass glassmorphism glassmorphism-css glassmorphism-html-css

Last synced: 4 months ago
JSON representation

This project is a digital clock designed with a glassmorphism style. I created this project to learn and explore the glassmorphism design trend

• Host: GitHub
• URL: https://github.com/migrim/glassmorphism-clock
• Owner: Migrim
• Created: 2024-07-27T17:07:11.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-09-09T15:12:48.000Z (9 months ago)
• Last Synced: 2025-02-14T23:43:40.632Z (4 months ago)
• Topics: frosted-effect, frosted-glass, glass, glassmorphism, glassmorphism-css, glassmorphism-html-css
• Language: CSS
• Homepage: https://migrim.github.io/Glassmorphism-Clock/
• Size: 106 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Glassmorphism Digital Clock

This project is a digital clock designed with a glassmorphism style. I created this project to learn and explore the glassmorphism design trend, which combines frosted-glass effects with smooth gradients and subtle shadows.

![Glassmorphism Digital Clock - Dark Mode](images/dark-mode.png)

![Glassmorphism Digital Clock - Light Mode](images/white-mode.png)

## Features

- Real-time digital clock

- Glassmorphism design elements

- Responsive layout

- **Switch between dark mode and light mode with a left-click**

## Technologies Used

- HTML

- CSS

- JavaScript

## How to Switch Between Modes

You can toggle between **dark mode** and **light mode** by clicking anywhere on the clock with the left mouse button. The clock starts in dark mode by default.

## How to Run

1. Clone the repository

2. Open `index.html` in your browser