Liquid Glass Effect Demo

Padrão

Configuração padrão do Liquid Glass com blur médio e opacidade baixa.

Alta Opacidade

Efeito com maior opacidade para um visual mais sólido.

Blur Intenso

Efeito com blur máximo para um visual mais suave.

Com Ruído

Efeito com textura de ruído para um visual mais orgânico.

Blur Mínimo

Efeito com blur reduzido para manter mais detalhes do fundo.

Avançado

Combinação de blur alto, opacidade média e ruído.

Glass Buttons Demo

Tamanhos

Variantes

Blur

Com Ícones

Liquid Glass da Apple

Este efeito recria o visual característico do Liquid Glass da Apple, combinando backdrop-filter, gradientes sutis, sombras internas e transparência para criar uma superfície que parece flutuar sobre o fundo.

Ver no GitHubDocumentação

GlassUserCard Demo

Default Variant

JS

João Silva

@joaosilva

42 posts

MS

Maria Santos

@mariasantos

128 posts

Compact Variant

PC

Pedro Costa

@pedrocosta

15 posts

AO

Ana Oliveira

@anaoliveira

89 posts

CF

Carlos Ferreira

@carlosferreira

3 posts

Different Configurations

LR

Lucia Rodrigues

@luciarodrigues

256 posts

RL

Roberto Lima

@robertolima

67 posts

Inside GlassBox Container

Suggested Users

FA

Fernanda Alves

@fernandaalves

91 posts

MP

Marcos Pereira

@marcospereira

34 posts

GlassUserPostGrid

Default Variant

Compact Variant

Different Glass Configurations

High Opacity + Noise

Low Opacity + Strong Blur

Inside GlassBox Container

User Posts Gallery

GlassInput

Input Variants

Default

Outline

Ghost

Glass Configurations

High Opacity + Noise

Low Opacity + Strong Blur

Input Types

Input States

Disabled

With Value

Inside GlassBox Container

Contact Form