Tutorial WordPress: Diseñar tarjetas con borde interior (inset) usando box-shadow

Introducción

Este tutorial explica con todo lujo de detalles cómo diseñar tarjetas (cards) con un borde interior usando la propiedad CSS box-shadow en modo inset. Verás desde la teoría y sintaxis básica, ejemplos prácticos escalables, buenas prácticas para usarlas en proyectos WordPress (temas y bloques), hasta consideraciones de accesibilidad y rendimiento. Todos los ejemplos de código están listos para copiar y pegar en tu tema o bloque.

Concepto y fundamentos

La propiedad box-shadow permite dibujar sombras externas e internas alrededor de un elemento. Cuando se usa la palabra clave inset, la sombra se dibuja dentro del contenedor, lo cual puede simular un borde interior sin usar la propiedad border. Esto es útil para crear efectos sutiles (o dramáticos) sin afectar el box model (ancho/alto) del elemento.

Sintaxis básica de box-shadow

La sintaxis general es: offset-x offset-y blur-radius spread-radius color, donde puedes anteponer inset para sombras internas. Para crear un borde interior sin desenfoque, se suele usar blur-radius en 0 y manipular spread-radius y color.

Ejemplo 1 — Tarjeta simple con borde interior

Una tarjeta sencilla con borde interior nítido (sin desenfoque) se consigue con un inset shadow con blur 0. Aquí se usa una variable CSS para el color del borde para facilitar la reutilización.

:root{
  --card-bg: #ffffff
  --card-radius: 12px
  --inset-color: rgba(0,0,0,0.08)
  --card-padding: 20px
}

.card-inset {
  background: var(--card-bg)
  border-radius: var(--card-radius)
  padding: var(--card-padding)
  box-shadow: inset 0 0 0 1px var(--inset-color) / borde interno de 1px /
  transition: box-shadow 180ms ease, transform 180ms ease
}

Notas:

Usar box-shadow: inset 0 0 0 1px color crea un borde interior de 1px. El spread (cuarto valor) es el grosor del borde.
Mantener blur en 0 evita difuminado si quieres bordes difuminados, aumenta blur (tercer valor).

Ejemplo 2 — Borde interior múltiple y profundidad

Puedes encadenar varias sombras separadas por comas para crear múltiples bordes internos o combinar borde interno con sombreado externo.

.card-inset-multi {
  background: linear-gradient(180deg, #fff 0%, #fbfbfc 100%)
  border-radius: 16px
  padding: 24px
  / primer borde interior oscuro, segundo borde interior sutil, sombra externa suave /
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,0.06), / borde interior principal /
    inset 0 6px 18px -10px rgba(0,0,0,0.05), / sutil profundidad interna /
    0 8px 20px rgba(17,24,39,0.06) / sombra externa /
  transition: transform .18s ease, box-shadow .18s ease
}

.card-inset-multi:hover {
  transform: translateY(-6px)
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,0.08),
    inset 0 10px 30px -14px rgba(0,0,0,0.06),
    0 18px 46px rgba(17,24,39,0.12)
}

Ejemplo 3 — Borde interior con color degradado o “glow”

Puedes usar mask o pseudo-elementos, pero si quieres mantenerlo con box-shadow puro, usa colores semitransparentes y múltiples capas para simular un glow. Para efectos más complejos se recomiendan pseudo-elementos para no afectar la lógica del contenido.

.card-inset-glow {
  background: #0f1724
  color: #fff
  border-radius: 12px
  padding: 20px
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 30px 6px rgba(99,102,241,0.08) / glow interno /
}

HTML de ejemplo (para tu plantilla o bloque)

A continuación un ejemplo de marcado que puedes usar dentro de una plantilla de bloque, un archivo PHP de plantilla o en un bloque HTML personalizado en el editor.



  Nombre de la tarjeta
  Resumen o contenido principal. Aquí va texto y otros elementos como botones o imágenes.

Integración en WordPress

1) Añadir CSS al tema (recomendado: enqueue)

No pegues CSS directo en archivos core ni en el editor sin control. Añade tu hoja de estilos o un archivo CSS parcial y enqueued desde functions.php para mantener buenas prácticas y caché controlado.

// functions.php (ejemplo simple)
function tema_child_enqueue_styles() {
  wp_enqueue_style( tema-child-styles, get_stylesheet_directory_uri() . /css/cards-inset.css, array(), 1.0.0 )
}
add_action( wp_enqueue_scripts, tema_child_enqueue_styles )

2) Añadir estilos para el editor Gutenberg

Si quieres que las tarjetas se vean igual en el editor de bloques, encola una hoja de estilo para editor o usa el soporte de theme.json según tu versión de WordPress.

// Enqueue editor style (ejemplo)
function tema_enqueue_block_editor_assets() {
  wp_enqueue_style( tema-editor-cards, get_stylesheet_directory_uri() . /css/cards-inset-editor.css, array( wp-edit-blocks ), 1.0.0 )
}
add_action( enqueue_block_editor_assets, tema_enqueue_block_editor_assets )

3) Uso en bloques o patrones

Crea un patrón o bloque reutilizable que use la clase card-inset. En bloques dinámicos o server-side puedes renderizar el markup con clases y dejar que el CSS haga el resto.

Accesibilidad y usabilidad

Contraste: asegúrate de contraste suficiente entre texto y fondo. El borde interno no debe empeorar la legibilidad.
Foco: añade estilos de foco visibles (outline o box-shadow externo) para usuarios que navegan con teclado. No uses sólo el color para indicar estado.
Reducción de animaciones: respeta la preferencia del usuario para reducir movimiento (prefers-reduced-motion).

/ Ejemplo de foco accesible /
.card-inset:focus-within {
  box-shadow:
    inset 0 0 0 2px rgba(59,130,246,0.16),
    0 0 0 3px rgba(59,130,246,0.12) / contorno externo para foco /
  outline: none
}

/ Respetar prefers-reduced-motion /
@media (prefers-reduced-motion: reduce) {
  .card-inset, .card-inset-multi {
    transition: none
  }
}

Compatibilidad de navegadores y rendimiento

box-shadow está ampliamente soportado en navegadores modernos. Sin embargo, sombras múltiples y sombras con blur pueden afectar rendimiento en dispositivos menos potentes, especialmente si tienes muchas tarjetas en pantalla. Para mejorar rendimiento:

Evita blur excesivo en muchos elementos simultáneos.
Usa will-change o transform para animaciones en hover, pero con cautela (no abuses de will-change).
Prefiere composiciones que usen transform en lugar de rehacer layout (por ejemplo, translateY en hover).

Trucos avanzados y variaciones

Usar box-shadow background-clip: padding-box cuando también usas border para controlar cómo se recortan fondos y bordes.
Combinar inset con pseudo-elementos (:before/:after) para crear líneas internas más complejas o secciones coloreadas sin añadir elementos extra al DOM visible.
Usar variables CSS para temas: Define colores y grosores en :root o en variables del tema para que el equipo de diseño las ajuste fácilmente.

/ Ejemplo combinando background-clip para evitar que la sombra interna se mezcle con el borde real /
.card-combo {
  border-radius: 12px
  background: linear-gradient(180deg,#fff,#f8fafc)
  border: 1px solid transparent
  background-clip: padding-box / evita que el borde transparente se mezcle con la visual del interior /
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06)
}

Posibles problemas y soluciones

Relleno interior demasiado pequeño: el borde inset puede superponerse a contenido aumenta padding si el borde tapa elementos.
Redondeo inconsistente: cuando usas bordes muy finos, los bordes redondeados pueden mostrar aliasing en algunos navegadores prueba ajustar el radio o usar imágenes SVG si es crítico.
Tarjetas con fondo transparente: sombras internas en elementos semitransparentes pueden producir resultados inesperados ajusta la opacidad del color del shadow.

Checklist para producción en WordPress

Colocar el CSS en un archivo encolado correctamente (no inline salvo que sea micro CSS).
Probar en el editor de bloques y en el front para garantizar consistencia.
Asegurar estados de foco visibles y accesibles.
Optimizar para móviles: asegurar padding y tamaños adaptativos (usar unidades relativas o media queries).
Verificar rendimiento al listar muchas tarjetas (por ejemplo, en un grid de 30 items).

Ejemplo final completo (HTML CSS) para copiar

Ejemplo combinado que puedes integrar en un patrón o plantilla.

/ cards-inset.css (ejemplo completo) /
:root{
  --card-bg: #ffffff
  --card-radius: 14px
  --card-padding: 18px
  --inset-1: rgba(2,6,23,0.06)
  --inset-2: rgba(2,6,23,0.03)
}

.card-inset {
  background: linear-gradient(180deg,#fff,#fbfdff)
  border-radius: var(--card-radius)
  padding: var(--card-padding)
  box-shadow:
    inset 0 0 0 1px var(--inset-1),
    inset 0 8px 20px -14px var(--inset-2),
    0 10px 28px rgba(2,6,23,0.06)
  transition: transform .2s ease, box-shadow .2s ease
}

/ responsive: reducir padding en pantallas pequeñas /
@media (max-width: 480px) {
  .card-inset {
    padding: 14px
  }
}



  Beneficio principal
  Explicación breve del contenido de la tarjeta. Añade enlaces, botones o imágenes según necesites.

Conclusión

El uso de box-shadow: inset permite crear bordes internos visualmente atractivos sin tocar el flujo de layout y ofrece gran flexibilidad —desde bordes nítidos hasta brillos internos complejos—. En WordPress, encola tus estilos, provee estilos de editor para consistencia y cuida accesibilidad y rendimiento. Con las técnicas anteriores podrás diseñar tarjetas modernas y reutilizables listas para producción.

SushiHost