/frosted-glass

❄️ Add a live frosted glass blur effect over any type of web content, including text.

Primary LanguageHTMLMIT LicenseMIT

Frosted Glass npm version

❄️ Add a live frosted glass blur effect over any type of web content, including text. ️️

Build Status Codecov Dependency Status devDependency Status Built With Stencil

Demos

Vanilla React Vue Angular

Navbar blur example gif

Install

npm install frosted-glass --save

Setup

  • Add a script tag in the head of your index.html
<script src='node_modules/frosted-glass/dist/frostedglass.js'></script>

Usage

  • Add a frosted-glass-container element
  • Add a child frosted-glass element that should have a blur effect applied
<frosted-glass-container>
  <h1>Welcome!</h1>
  <frosted-glass>
    <div class="nav-content">Nav content</div>
  </frosted-glass>
</frosted-glass-container>

Optional properties

frosted-glass

  • blur-amount - specifies the blur amount applied
  • overlay-color - adds an overlay on top of the blur

frosted-glass-container

Example

<frosted-glass-container stretch="true">
  <frosted-glass blur-amount="5px" overlay-color="#ffffff52"></frosted-glass>
</frosted-glass-container>

License

frosted-glass is licensed under the MIT Open Source license. For more information, see the LICENSE file in this repository.