3D glassmorphism styles and components, built with modern CSS.
This project is set up as a design system prototyping playground. You can easily configure the design tokens and instantly see the results applied to the demo site.
- Customizable design tokens and composable styling classes. For glass that reflects your branding.
- Fluid typography and sizing. For elements that scale with viewport width.
- Container queries. For truly responsive components.
- HTML
- CSS (SCSS)
- Vanilla JS
All the CSS used is supported by the latest desktop and mobile versions of Firefox, Safari, and Chrome.
If you require legacy browser support please make sure to test! The goal of this project was to create next-gen glassmorphism, therefore backwards compatibility was not a top priority.
This project uses Stephanie Eckles' Minimum Static Site Setup with Sass
To get started:
- Make sure you have Node, and Npm installed.
- Install Node modules.
npm install
- Copy src files to public and start Browsersync server at localhost:3000.
npm start
- Stephanie Eckles for Minimum Static Site Setup with Sass
- Adrian Bece for interactive fluid typography editor
- James Gilyead & Trys Mudford for Fluid Space Calculator
- Chris Coyier for change SVG color with mask
- Ahmad Salameh for Noise texture generator
Kris Kay
This project is licensed under the MIT License - see the LICENSE.md file for details.