frosted-glass
TypeScript icon, indicating that this package has built-in type declarations

0.3.1 • Public • Published

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.

Dependencies (1)

Dev Dependencies (10)

Package Sidebar

Install

npm i frosted-glass

Weekly Downloads

237

Version

0.3.1

License

MIT

Unpacked Size

95.7 kB

Total Files

22

Last publish

Collaborators

  • adriancarriger