Skip to main content
A visually striking glassmorphism effect using SVG displacement filters similar to Apple Liquid Glass.
This component uses SVG filters for backdrop blur. These are not supported in Safari and have very limited support in Firefox.It is recommended to use this component when you are targeting Chromium based browsers, and use a fallback component in case user is on Safari or Firefox.For example, Inspira UI landing page uses Liquid Glass component on Chromium based browsers but fallback to Frosted Glass effect on Safari and Mozilla.

​
Usage

<script setup lang="ts">
import { LiquidGlass } from '@/components/visualization'
</script>

<template>
  <LiquidGlass
    :radius="16"
    :border="0.07"
    :lightness="50"
    blend="difference"
  >
    <div class="p-8">
      <h2>Content with liquid glass effect</h2>
    </div>
  </LiquidGlass>
</template>

​
Props

Prop NameTypeDefaultDescription
radiusnumber16Border radius for the glass container corners (in pixels).
bordernumber0.07Relative border thickness affecting displacement filter inner margin.
lightnessnumber50Lightness (0-100) of the overlay color in HSL scale.
blendstring"difference"CSS blend mode used between red and blue displacement layers for the distortion effect.
xChannel"R" | "G" | "B""R"Channel from displacement image to use for horizontal displacement.
yChannel"R" | "G" | "B""B"Channel from displacement image to use for vertical displacement.
alphanumber0.93Alpha transparency of the overlay color (0-1).
blurnumber11Gaussian blur radius applied to the overlay.
rOffsetnumber0Additional scale offset for red displacement map.
gOffsetnumber10Additional scale offset for green displacement map.
bOffsetnumber20Additional scale offset for blue displacement map.
scalenumber-180Base scale factor for displacement effects, combined with individual channel offsets.
frostnumber0.05Opacity factor controlling the frosted glass background overlay strength.
classstring""Additional CSS classes applied to the inner slot container wrapping content.
containerClassstring""Additional CSS classes applied to the outer container div.

​
Credits

  • Inspired by Apple Liquid Glass

Build docs developers (and LLMs) love

Get started for freeTalk to us