Refractive chromatic aberration effects in CSS.

Note that only Chrome-based browsers support this for now.

Usage

NPM:

npm install liquid-css

Yarn:

yarn add liquid-css

Import:

import 'liquid-css'

Materials

Liquid CSS works in CSS classes starting with .material. Most materials feature a gradient border from light to dark, a drop shadow, an inset glow, background blend darkening, and finally, rounding.

Glass

<div class="material glass"></div>

Glass gives a transparent, saturated, refractive, chromatic aberrated backdrop filter meant for materials where seeing through them is preferred. For example, a range slider could have a thumb made of glass.

It is not recommended to make a button out of glass, for example, unless it is placed on top of a less transparent material, such as Ice.

Ice

<div class="material ice"></div>

Ice gives an opaque, saturated, frosted/blurred, refractive chromatic aberrated backdrop filter meant for most materials, especially those with content, particularly text on top of them.

Black Ice

For a darker background to the ice, use .black-ice.

<div class="material black-ice"></div>

Apply these classes individually to containers, buttons, etc., to get the same effects.