https://github.com/hind-sagar-biswas/glasscss

A Glassmorphism CSS code generator tool on vanilla JavaScript
https://github.com/hind-sagar-biswas/glasscss

code-generation glassmorphism-css html-css-javascript javascript-tools

Last synced: 7 months ago
JSON representation

A Glassmorphism CSS code generator tool on vanilla JavaScript

• Host: GitHub
• URL: https://github.com/hind-sagar-biswas/glasscss
• Owner: hind-sagar-biswas
• License: gpl-3.0
• Created: 2021-02-23T22:10:44.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-02-24T20:34:12.000Z (over 4 years ago)
• Last Synced: 2025-02-03T04:29:05.725Z (9 months ago)
• Topics: code-generation, glassmorphism-css, html-css-javascript, javascript-tools
• Language: HTML
• Homepage: https://hind-sagar-biswas.github.io/glassCSS/
• Size: 106 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# glassCSS

![Project Type](https://img.shields.io/static/v1?label=type&message=tool&color=blue)

![Main Language](https://img.shields.io/static/v1?label=language&message=JavaScript&color=yellow&logoColor=yellow&logo=javascript)

![Used Framework](https://img.shields.io/static/v1?label=framework&message=bootstrap&color=blue&logoColor=ffffff&logo=bootstrap)

![Latest stable version](https://img.shields.io/static/v1?label=version&message=1.0&color=red)

![Website Up](https://img.shields.io/static/v1?label=website&message=up&color=green)

![Maintenance Yes](https://img.shields.io/static/v1?label=maintained&message=yes&color=green)

![PRs welcome](https://img.shields.io/static/v1?label=PSs&message=welcome&color=brightgreen)

![Glassmorphism](glassmorphism.jpeg)

A Glassmorphism CSS code generator tool

**Generator @** [https://hind-sagar-biswas.github.io/glassCSS/](https://hind-sagar-biswas.github.io/glassCSS/)

## What is Glassmorphism

Glassmorphism is a unified name for the popular Frosted Glass aesthetic. It has many names depending on the company using it, so we wanted to create a common ground for designers and developers to find related resources easier and faster.

The effect is based on background blur with transparency, and uses stacked layers to show the depth and context of the interface.

## Clone Repo

#### Git CLI

```

gh repo clone hind-sagar-biswas/glassCSS

```

#### HTTPS

```

https://github.com/hind-sagar-biswas/glassCSS.git

```

## CSS code

General CSS code for glassmorphism

```css

background: rgba( 225, 225, 225, 0.3 );

box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.30 );

backdrop-filter: blur( 4px );

-webkit-backdrop-filter: blur( 4px );

border-radius: 10px;

border: 1px solid rgba( 255, 255, 255, 0.18 );

```

Use the above code to any `element` to give it a glass morphic effect.

## License

This code has been licensed under `GNU AGPLv3` open source copyleft license. 

## Author

***Hind Sagar Biswas***

**Website:** [https://hindbiswas.000webhostapp.com/](https://hindbiswas.000webhostapp.com/)

[![Author Facebook](https://img.shields.io/static/v1?label=facebook&message=hindsagar.biswas&style=social&logo=facebook)](https://m.facebook.com/hindsagar.biswas)

[![Author Twitter](https://img.shields.io/static/v1?label=twitter&message=@hind_biswas&style=social&logo=twitter)](https://twitter.com/hind_biswas)