Glossy Glass

A lightweight JavaScript library for applying beautiful glassmorphism effects to your web elements.

Installation

npm install glossy-glass
# or
yarn add glossy-glass

Usage

HTML

First, make sure you have an HTML element you want to apply the effect to:

<div id="my-glass-element">
  This is a glassmorphism element.
</div>

JavaScript

Import the functions and apply the effect:

import { applyGlassmorphism, removeGlassmorphism, toggleGlassmorphism } from 'glossy-glass';

const myElement = document.getElementById('my-glass-element');

// Apply the effect with default options
applyGlassmorphism(myElement);

// Apply the effect with custom options
applyGlassmorphism(myElement, {
  blur: '15px',
  backgroundColor: 'rgba(255, 255, 255, 0.05)',
  border: '1px solid rgba(255, 255, 255, 0.1)',
  borderRadius: '15px',
});

// Remove the effect
// removeGlassmorphism(myElement);

// Toggle the effect
// toggleGlassmorphism(myElement);

API

applyGlassmorphism(element, options)

Applies a glassmorphism effect to an HTML element.

• element: The HTML element to apply the effect to. (Required)
• options: An object with configuration options. (Optional)
  • blur (string, default: '10px'): The blur radius for the background.
  • brightness (string, default: '100%'): The brightness of the background.
  • saturate (string, default: '100%'): The saturation of the background.
  • backgroundColor (string, default: 'rgba(255, 255, 255, 0.1)'): The background color with transparency.
  • border (string, default: '1px solid rgba(255, 255, 255, 0.2)'): The border style.
  • borderRadius (string, default: '10px'): The border radius.
  • boxShadow (string, default: '0 4px 6px rgba(0, 0, 0, 0.1)'): The box shadow.

removeGlassmorphism(element)

Removes the glassmorphism effect from an HTML element.

• element: The HTML element to remove the effect from. (Required)

toggleGlassmorphism(element, options)

Toggles the glassmorphism effect on an HTML element. If the effect is present, it removes it; otherwise, it applies it.

• element: The HTML element to toggle the effect on. (Required)
• options: An object with configuration options, same as applyGlassmorphism. (Optional)

License

This project is licensed under the ISC License.