LiquidGlass

Frosted glass surface with adjustable radius and blur. Size prop (padding): xs, sm, md, lg, xl.

Import

Vue

import { UiLiquidGlass } from '@ziyarago/ui/vue'

Sizes

Liquid glass surface

Vue

<UiLiquidGlass size="xs">
  Liquid glass surface
</UiLiquidGlass>

<UiLiquidGlass size="sm">
  Liquid glass surface
</UiLiquidGlass>

<UiLiquidGlass size="md">
  Liquid glass surface
</UiLiquidGlass>

<UiLiquidGlass size="lg">
  Liquid glass surface
</UiLiquidGlass>

<UiLiquidGlass size="xl">
  Liquid glass surface
</UiLiquidGlass>

Default

Liquid glass surface

Vue

<UiLiquidGlass>
  Liquid glass surface
</UiLiquidGlass>

Large radius, strong blur

Softer, rounder glass

Vue

<UiLiquidGlass :radius="40" :blur="30" :style="{ padding: '24px' }">
  Softer, rounder glass
</UiLiquidGlass>

API reference

Frosted liquid-glass panel with adjustable corner radius and blur.

Props

PropType and valuesDefaultDescription

radiusnumber | string24Corner radius. Numbers are pixels.

blurnumber | string18Backdrop blur radius. Numbers are pixels.

sizexssmmdlgxl'md'Inner padding.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultPanel content.

Notes

Backdrop blur is visible only over a colorful or image background.