This is a lightweight(1.1KB) Glassmorphism Library to get the GLASSY effect in any of your frontend project.

Installation:

USING NPM:

npm install glassyeffect

and in your ReactJS file

import 'glassyeffect'

and in your css file

@import "glassyeffect/index.css";
or
@import "glassyeffect";

or

add below line of code in your html file

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/index.css"
/>

or CDN LINK: https://cdn.jsdelivr.net/npm/[email protected]/index.css

import this CDN link at the end of your body closing tag and write the class of the effect which you want in your project.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.css"></script>

Checkout the demo @

Rahul Nag Repo - https://rahulnag.github.io/glassy-effect/

NOTE: Feel free to create an issue

HOW TO USE THIS LIBRARY:

STEP1: IMPORT THIS LIBRARY AT END OF BODY TAG

<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.css"></script>

STEP2: CHECK THE DEMO LINK https://rahulnag.github.io/glassy-effect/ AND GET THE CLASS NAME OF GLASS EFFECT OF YOUR CHOICE.

<div class="card glassType3">
     <h3>THIS IS CARD 3</h3>
</div>

COPY AND PASTE THE CLASSNAME SHOWN IN https://rahulnag.github.io/glassy-effect/.

STEP3: ENJOY THE LIBRARY 🥳🥳🥳.

CHECK OUT THESE LINKS FOR SOME MORE FUN AND HELPFUL RESOURCES.

1. COLORSCUBE.ML -- COLLECTION OF AMAZING COLORS FOR UI
2. MY EMOJI -- COLLECTION OF 1000 EMOJIS, CLICK TO COPY AND PASTE EMOJI WHEREVER YOU WANT
3. CAPSCODE.IN -- ONLINE CODE LEARNING PLATFORM
4. FOLLOW CAPSCODE ON INSTAGRAM FOR DAILY AMAZING UPDATES ON TECH