CSS Moderno 2025 Elegante

backdrop-filter Interfaces de Cristal con CSS Puro

Crea efectos de vidrio esmerilado, blur de fondo y filtros visuales que transforman interfaces ordinarias en experiencias elegantes y modernas. Todo con CSS nativo, sin JavaScript.

Glassmorphism Efecto cristal

8 Filtros Combinables

GPU Acelerado Performance

Playground Interactivo Experimenta con los filtros en tiempo real

Filtros

blur() 10px

Desenfoque gaussiano del fondo

brightness() 100%

Luminosidad del fondo filtrado

saturate() 100%

Intensidad de colores

contrast() 100%

Diferencia entre claros y oscuros

Opacidad fondo 20%

Transparencia de la capa de color

Código CSS

backdrop-filter: blur(10px);
background: rgba(255,255,255,0.2);

Presets rápidos

Vista Previa

Glassmorphism Card

Este panel usa backdrop-filter para crear el efecto de vidrio esmerilado sobre el fondo colorido.

Galería de Efectos Estilos predefinidos listos para usar

Classic Glass

El glassmorphism estándar

blur(10px) + rgba(255,255,255,0.2)

Frosted

Blur intenso tipo iOS

blur(20px) + rgba(255,255,255,0.3)

Dark Glass

Elegante modo oscuro

blur(15px) + rgba(0,0,0,0.4)

Vibrant

Colores intensificados

blur(8px) saturate(180%)

Muted

Suave y desaturado

blur(12px) saturate(50%)

Bright

Luminoso y aireado

blur(10px) brightness(120%)

Ejemplos de UI Real Componentes prácticos con backdrop-filter

Navigation Bar Glassmorphism

Header sticky que se vuelve translúcido al hacer scroll, manteniendo legibilidad sobre cualquier contenido.

.navbar {
  position: sticky;
  top: 0;
  backdrop-filter: blur(10px) saturate(180%);
  background: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

Modal con Overlay Blur

Diálogo modal que desenfoca el contenido de fondo, centrando la atención en el mensaje importante.

.modal-overlay {
  position: fixed;
  inset: 0;
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.5);
  display: grid;
  place-items: center;
}

.modal {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 2rem;
}

Cards sobre Imagen

Tarjetas informativas superpuestas sobre imágenes de fondo, con texto perfectamente legible gracias al blur.

Rápido

Performance optimizado para cualquier dispositivo

Seguro

Protección de datos de nivel empresarial

Elegante

Diseño moderno que impresiona

.glass-card {
  backdrop-filter: blur(16px) saturate(180%);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
}

Con vs Sin backdrop-filter La diferencia visual es notable

Sin backdrop-filter

Card Tradicional

Fondo sólido opaco que oculta completamente lo que hay detrás.

Fondo completamente opaco
Sin conexión visual con el fondo
Diseño más pesado visualmente
Sin efecto de profundidad

Con backdrop-filter

Card Glassmorphism

Efecto de cristal que integra el contenido con el fondo.

Transparencia elegante
Integración visual armoniosa
Diseño ligero y moderno
Profundidad y dimensionalidad

Tips de Performance Usa backdrop-filter de forma eficiente

Limita el área de efecto

Aplica backdrop-filter solo en elementos pequeños o medianos. Evita usarlo en áreas muy grandes como fondos de página completa.

/* ✅ Bien */ .card { ... } /* ❌ Evitar */ body { ... }

Usa contain para aislar

La propiedad contain ayuda al navegador a optimizar el renderizado limitando el área de recálculo.

contain: layout paint;

Evita animaciones constantes

No animes el valor de backdrop-filter continuamente. Si necesitas transiciones, hazlas cortas y puntuales.

transition: backdrop-filter 0.3s;

Proporciona fallbacks

Usa @supports para ofrecer una alternativa en navegadores antiguos o dispositivos de bajo rendimiento.

@supports (backdrop-filter: blur(1px))

Soporte de Navegadores Amplia compatibilidad en navegadores modernos

Chrome 76+ ✅

Firefox 103+ ✅

Safari 9+ ✅ (prefijo)

Edge 79+ ✅

Fallback Recomendado

/* Fallback para navegadores sin soporte */
.glass-element {
  /* Fallback: fondo semi-opaco */
  background: rgba(255, 255, 255, 0.8);
}

/* Si soporta backdrop-filter, usarlo */
@supports (backdrop-filter: blur(10px)) {
  .glass-element {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari */
  }
}

Código de Referencia Snippets listos para copiar y usar

Glassmorphism Básico

CSS

.glass {
  /* Efecto de cristal */
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  
  /* Fondo semi-transparente */
  background: rgba(255, 255, 255, 0.2);
  
  /* Borde sutil */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  
  /* Sombra para profundidad */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

Todos los Filtros Disponibles

CSS

/* Filtros individuales */
backdrop-filter: blur(10px);        /* Desenfoque */
backdrop-filter: brightness(150%);  /* Brillo */
backdrop-filter: contrast(120%);    /* Contraste */
backdrop-filter: grayscale(100%);   /* Escala de grises */
backdrop-filter: hue-rotate(90deg); /* Rotación de tono */
backdrop-filter: invert(100%);      /* Invertir colores */
backdrop-filter: saturate(200%);    /* Saturación */
backdrop-filter: sepia(100%);       /* Efecto sepia */

/* Combinación de filtros */
backdrop-filter: blur(10px) saturate(180%) brightness(110%);

Dark Mode Glassmorphism

CSS

/* Light mode */
.glass-card {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Dark mode */
[data-theme="dark"] .glass-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}