Tutorial WordPress: Crear tarjetas con efecto glassmorphism sin JS

Crear tarjetas con efecto glassmorphism en WordPress sin JavaScript

El glassmorphism es una tendencia de diseño que combina transparencias, desenfoque y bordes sutiles para simular vidrio esmerilado o cristal translúcido. En este tutorial detallado aprenderás a crear tarjetas con efecto glassmorphism 100% con CSS, integrarlas en WordPress (tema o editor de bloques), garantizar compatibilidad y accesibilidad, y ofrecer alternativas para navegadores que no soportan backdrop-filter.

Resumen técnico y ventajas

Sin JavaScript: todo el efecto se logra con CSS moderno (backdrop-filter, gradientes y variables).
Ligero y rápido: evita cargas de script adicionales.
Personalizable: CSS variables para colores, intensidad de blur y radios.
Fallback: estilos alternativos para navegadores sin soporte.

Requisitos

WordPress 5.x o superior (funciona tanto en temas clásicos como en themes basados en bloques).
Contenido HTML semántico para las tarjetas (article, header, footer, etc.).
Soporte del tema para agregar CSS (archivo style.css o encolar hoja externa).

Estructura HTML recomendada (ejemplo)

Usa marcas semánticas dentro del bucle o como patrón/block. El siguiente marcado es simple y accesible.

ltarticle class=gm-card role=article aria-label=Tarjeta de ejemplogt
  ltheader class=gm-card-headergt
    ltimg class=gm-card-image src=ruta/imagen.jpg alt=Descripción de la imagengt
  lt/headergt
  ltdiv class=gm-card-bodygt
    lth3 class=gm-card-titlegtTítulo de la tarjetalt/h3gt
    ltp class=gm-card-excerptgtResumen o descripción breve que acompaña la tarjeta.lt/pgt
    lta class=gm-card-cta href=#gtLeer máslt/agt
  lt/divgt
lt/articlegt

CSS base para el efecto glassmorphism

Este CSS usa variables para poder ajustar rápidamente colores, desenfoque, borde y sombras. Incluye prefijos para Safari (-webkit-backdrop-filter) y una sección @supports para detectar soporte y aplicar un fallback.

:root{
  --gm-bg-1: rgba(255,255,255,0.10) / capa principal /
  --gm-bg-2: rgba(255,255,255,0.06) / degradado /
  --gm-border: rgba(255,255,255,0.25)
  --gm-radius: 16px
  --gm-blur: 10px
  --gm-shadow: 0 6px 20px rgba(0,0,0,0.12)
  --gm-accent: rgba(255,255,255,0.35)
}

/ Contenedor principal /
.gm-card{
  position: relative
  overflow: hidden
  border-radius: var(--gm-radius)
  background: linear-gradient(135deg, var(--gm-bg-1), var(--gm-bg-2))
  border: 1px solid var(--gm-border)
  box-shadow: var(--gm-shadow)
  backdrop-filter: blur(var(--gm-blur)) saturate(120%)
  -webkit-backdrop-filter: blur(var(--gm-blur)) saturate(120%)
  padding: 1rem
  color: #fff
  transition: transform .24s ease, box-shadow .24s ease
}

/ Efecto hover sutil (sin animar blur) /
.gm-card:hover,
.gm-card:focus-within{
  transform: translateY(-6px)
  box-shadow: 0 12px 30px rgba(0,0,0,0.18)
}

/ Imagen superior con blend /
.gm-card-image{
  width: 100%
  height: 160px
  object-fit: cover
  display: block
  border-radius: calc(var(--gm-radius) - 4px)
  margin-bottom: 0.75rem
  mix-blend-mode: multiply
  opacity: 0.95
}

/ Texto y CTA /
.gm-card-title{
  margin: 0 0 .5rem 0
  font-size: 1.125rem
  color: #ffffff
  text-shadow: 0 1px 2px rgba(0,0,0,0.25)
}
.gm-card-excerpt{
  margin: 0 0 .75rem 0
  color: rgba(255,255,255,0.9)
  font-size: .95rem
}
.gm-card-cta{
  display: inline-block
  padding: .45rem .75rem
  border-radius: 8px
  background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.07))
  color: #fff
  text-decoration: none
  border: 1px solid rgba(255,255,255,0.12)
  transition: background .18s ease, transform .18s ease
}
.gm-card-cta:focus,
.gm-card-cta:hover{
  transform: translateY(-2px)
  background: rgba(255,255,255,0.18)
}

/ Fallback: si no hay soporte para backdrop-filter,reduce blur y aumenta opacidad para legibilidad /
@supports not ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))) {
  .gm-card{
    backdrop-filter: none
    -webkit-backdrop-filter: none
    background: rgba(255,255,255,0.88) / color sólido translúcido /
    color: #111
    border: 1px solid rgba(0,0,0,0.06)
  }
  .gm-card-title, .gm-card-excerpt {
    color: #111
  }
  .gm-card-cta {
    color: #111
    background: rgba(0,0,0,0.05)
  }
}

/ Preferencias de accesibilidad /
@media (prefers-reduced-motion: reduce) {
  .gm-card, .gm-card-cta {
    transition: none
    transform: none
  }
}

/ Responsive: ejemplo en cuadrícula /
.gm-grid{
  display: grid
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))
  gap: 1.25rem
}

Integración en WordPress (encolar la hoja de estilos)

La forma recomendada es añadir un archivo CSS en tu tema (por ejemplo css/glassmorphism.css) y encolarlo desde functions.php.

/ functions.php /
function theme_enqueue_glassmorphism(){
  wp_enqueue_style(
    theme-glassmorphism,
    get_template_directory_uri() . /css/glassmorphism.css,
    array(),
    1.0.0
  )

  / Si quieres que esté disponible también en el editor (Gutenberg) /
  wp_enqueue_style(
    theme-glassmorphism-editor,
    get_template_directory_uri() . /css/glassmorphism-editor.css,
    array(),
    1.0.0
  )
}
add_action(wp_enqueue_scripts, theme_enqueue_glassmorphism)
add_action(enqueue_block_editor_assets, theme_enqueue_glassmorphism)

Uso dentro de un template PHP (ejemplo en loop de posts)

Inserta la estructura HTML dentro del loop de WordPress para generar tarjetas dinámicas por entrada.

/ loop-card.php - fragmento a incluir dentro del loop /
if ( have_posts() ) :
  echo ltdiv class=gm-gridgt
  while ( have_posts() ) : the_post()
    thumb = get_the_post_thumbnail_url(get_the_ID(), large) ?: get_template_directory_uri()./assets/placeholder.jpg
    ?>
    ltarticle class=gm-card role=article aria-label=gt
      ltheader class=gm-card-headergt
        ltimg class=gm-card-image src= alt=gt
      lt/headergt
      ltdiv class=gm-card-bodygt
        lth3 class=gm-card-titlegtlta href=gtlt/agtlt/h3gt
        ltp class=gm-card-excerptgtlt/pgt
        lta class=gm-card-cta href=gtLeer máslt/agt
      lt/divgt
    lt/articlegt
    lt?php
  endwhile
  echo lt/divgt
endif

Patrón para el editor de bloques (Gutenberg)

Si prefieres no tocar código PHP, puedes crear un bloque HTML personalizado o un block pattern que incluya la estructura HTML y simplemente añadir la clase gm-card a cada bloque. Otra opción es añadir el CSS en Apariencia gt Personalizar gt CSS adicional.

Detalles importantes y buenas prácticas

Límites del blur: valores altos de blur impactan el rendimiento, especialmente en móviles. Mantén entre 6px y 16px.
Evitar animar backdrop-filter: produciría repintados costosos. Anima transformaciones y opacidad en su lugar.
Contraste y legibilidad: asegúrate de suficiente contraste entre texto y fondo, usa sombras de texto si procede.
Enlaces y focus: define estilos de foco visibles (.gm-card:focus-within y .gm-card-cta:focus) para accesibilidad por teclado.
Imágenes: optimiza (WebP/AVIF) y usa srcset/widths para reducir carga. No uses filtros CSS muy complejos sobre imágenes.

Ejemplo completo y listo para pegar

A continuación un ejemplo reducido que puedes copiar en tu tema: pone CSS en un archivo, y dentro de un template usa la estructura HTML mostrada más arriba. Este fragmento muestra la tarjeta principal y la cuadrícula.

lt!-- En tu template.php --gt
ltdiv class=gm-gridgt
  ltarticle class=gm-card role=article aria-label=Tarjeta demogt
    ltheader class=gm-card-headergt
      ltimg class=gm-card-image src=ruta/imagen-demo.jpg alt=Demogt
    lt/headergt
    ltdiv class=gm-card-bodygt
      lth3 class=gm-card-titlegtTítulo demolt/h3gt
      ltp class=gm-card-excerptgtDescripción breve de ejemplo para ilustrar el efecto glassmorphism en una tarjeta.lt/pgt
      lta class=gm-card-cta href=#gtMás informaciónlt/agt
    lt/divgt
  lt/articlegt
  lt!-- Repite las tarjetas según sea necesario --gt
lt/divgt

Pruebas y verificación

Comprueba en Safari, Chrome y Firefox el efecto de blur. Safari necesita -webkit-backdrop-filter.
Haz pruebas en móvil y en dispositivos de baja potencia para verificar rendimiento.
Activa Preferencias de alto contraste y Reduce motion para verificar las reglas CSS.
Valida accesibilidad: tabulación, lectura por screen readers y atributos alt en imágenes.

Optimización final y variaciones

Usa variables CSS para tematizar rápidamente (temas claros/oscuro).
Prueba degradados sutiles (colores pastel semitransparentes) para variaciones cromáticas.
Si necesitas animación del fondo, anima la opacidad o transform del overlay, nunca el blur.

Conclusión

El glassmorphism con CSS es una forma elegante y moderna de presentar tarjetas en WordPress sin añadir JavaScript extra. Con un uso juicioso de backdrop-filter, gradientes, variables y una estrategia de fallback, puedes ofrecer un resultado visual atractivo, accesible y eficiente en la mayoría de navegadores. Integra el CSS en tu tema o editor, utiliza la estructura semántica mostrada y ajusta variables para adaptarlo a tu identidad visual.

Referencias útiles: documentaciones sobre backdrop-filter (MDN), @supports y guías de rendimiento CSS.

SushiHost