CSS puro · Vidrio esmerilado · Bruma

Bruma
UI Kit

Sistema de tokens, 15+ componentes accesibles, modo claro/oscuro y 12 animaciones — cero dependencias.

Ver componentes → Ver animaciones
15+
Componentes
12
Animaciones
a11y
WCAG AA

Glass Cards

Hover para interactuar
Componente · 01

Frosted Surface

El blur de backdrop-filter da profundidad sin tapar el fondo.

Live
Componente · 02

Dark Glass

Tinte más oscuro para contrastar sobre fondos claros.

Premium
🌊
Lyra Voss
UI Designer · Berlin
Projects87%
Clarity94%

Buttons

Glass · Ghost · Accent · Danger · Tamaños

Navigation & Tabs

Pill nav · Tab panels · Toggle

Overview

Los paneles cambian el contenido sin recargar. Teclado y roles ARIA incluidos.

Technical Specs

Tokens CSS. El JS solo actualiza ARIA y el teclado (flechas, Home, End).

Example Panels

Adentro puede ir un form, una tabla o una card. El vidrio se adapta.

Grid List Map

Dropdown

Menú custom · teclado

Form Controls

Checkbox · Radio · Switch · Select · Input
✉

Accordion

Click para abrir
Un lenguaje visual en CSS: blur, superficies translúcidas y gradientes que simulan profundidad física.
backdrop-filter anda en los navegadores actuales. Hay un fallback @supports para los que no.
Todo vive en custom properties. Poné data-theme="light" en el HTML para cambiar la paleta.
Sí: roles ARIA, teclado, :focus-visible, prefers-reduced-motion y contraste WCAG AA en ambos temas.

Stepper

Flujo por pasos · horizontal y vertical

Horizontal

✓
Account
✓
Profile
3
Billing
4
Review

Vertical

✓
Create account
2
Verify email
3
Set up workspace

Data Table

Ordenable · hover · badges
Team Members 5 miembros
🔍
0 seleccionados
Member ↑ Role Status Projects ↕ Score ↕
👩
Lyra Voss
UI Designer Online 12
97
👨‍💻
Marc Dubois
Frontend Eng Online 8
89
👩‍🎨
Sara Kim
Motion Away 5
84
👨‍🔬
Omar Reyes
Backend Eng Offline 9
91
👩‍💼
Ines Hartmann
Product Online 14
99
Mostrando 1–5 de 5

Toast / Snackbar

Entrada animada · auto-cierre

Badges & Tags

Todas las variantes
Active Premium New Beta Online Error
glassmorphism bruma backdrop-filter blur effects CSS animations zero deps WCAG 2.1 AA

Notifications

Hover para deslizar
⚡
Build listo
UI Kit compilado — 0 errores.
8m
✦
Componente nuevo
glass-modal está listo.
1h

Modal

Focus trap · ARIA · entrada líquida

Skeleton Loader

Shimmer para contenido async

Chips

Dismissible · seleccionable · dinámico

Variantes de color

🌊Aqua✕ ⚡Violet✕ 🌸Rose✕ ✦Amber✕

Filtros seleccionables

Design Frontend Motion 3D Glassmorphism

Dinámicos — sacar o agregar

🎨Illustrator✕ 🖥Figma✕ ✏️Sketch✕

Avatar Group

Fotos · iniciales · estado · overflow

Hover para el nombre

👩
👨‍💻
👩‍🎨
+7
10 miembros · 3 online

12 Liquid Animations

CSS puro · loop · reduced-motion
1 · Liquid Morph
2 · Shimmer
3 · Float
4 · Refraction
5 · Ripple
6 · Edge Glow
7 · Breathing Blur
8 · Depth Shift
9 · Cascade Reveal
10 · Prism Hue Shift
11 · Liquid Drain
12 · Surface Tension