Elevación

Sistema de capas, sombras y z-index para comunicar profundidad y jerarquía.

Niveles

0

Base

Fondo de página, canvas principal

z-0
1

Elevado

Cards, contenedores de contenido

z-10
2

Flotante

Dropdowns, popovers, tooltips

z-20
3

Overlay

Modals, sidesheets, drawers

z-50
4

Crítico

Toasts, notificaciones, alerts

z-[100]

Backdrop blur

Usamos backdrop-blur para elementos flotantes que necesitan transparencia con legibilidad:

/* Header flotante */
.backdrop-blur-xl bg-black/70

/* Sidebar */
.backdrop-blur-xl bg-zinc-950/80

/* Modal backdrop */
.backdrop-blur-sm bg-black/80

/* Mobile menu */
.backdrop-blur-xl bg-black/95

Escala de z-index

z-indexUso
z-0Contenido base
z-10Sticky elements, elevated cards
z-20Dropdowns, popovers
z-30Fixed sidebars
z-40Fixed header/navigation
z-50Modals, overlays
z-[100]Toasts, notifications (siempre visibles)

Equivalencia nativa

iOS

  • • layer.shadowRadius para sombras
  • • UIBlurEffect para backdrop blur
  • • zPosition para layering

Android

  • • elevation property (dp)
  • • RenderEffect.createBlurEffect()
  • • translationZ para layering

Ejemplos en contexto

Capas superpuestas (page → card → dropdown → modal)

z-0: Página base

z-10: Card elevada

z-20: Dropdown

Opción 1
Opción 2

z-50: Modal

Backdrop blur + overlay

Header flotante con backdrop-blur

codeway.
LinkLinkLink
CTA