Tutorial WordPress: Estilizar citas y bloques “pullquote” con bordes y gradientes CSS

Introducción

Las citas y los bloques pullquote son elementos tipográficos muy útiles para resaltar frases clave dentro de un artículo en WordPress. Con CSS moderno puedes transformarlos de simples textos en recursos visuales potentes: bordes sutiles, sombras, gradientes, esquinas redondeadas, iconografía, layout responsivo y transiciones suaves. Este artículo recoge técnicas prácticas y ejemplos listos para usar, tanto para el editor clásico como para Gutenberg (bloques), y cómo integrarlos correctamente en tu tema o en el personalizador.

Selección del selector correcto

Antes de estilizar debes identificar el selector que usa tu contenido:

Editor clásico: ltblockquotegt … lt/blockquotegt (selector: blockquote)
Gutenberg (pullquote): elemento con clase .wp-block-pullquote y texto dentro de blockquote o p dependiendo del bloque.
Pullquotes personalizados: puedes añadir una clase de bloque personalizada en el panel de bloque (por ejemplo .accent-pullquote).

CSS básico para blockquote

Un punto de partida fiable es limpiar el default del navegador y aplicar un estilo base con espaciado, borde y tipografía.

blockquote {
  margin: 1.5em 0
  padding: 1rem 1.25rem
  border-left: 4px solid #ccc
  background: transparent
  color: #222
  font-style: italic
  line-height: 1.6
}

Explicación

border-left crea un indicador visual clásico.
padding y margin controlan el espacio alrededor y dentro del bloque.
font-style: italic hace la lectura típica de citas, pero puedes cambiarla si prefieres una estética distinta.

Pullquote con borde y gradiente

Para un pullquote más moderno combinamos borde multicolor y un gradiente de fondo, además de esquinas redondeadas y una sombra sutil.

.wp-block-pullquote,
.pullquote,
blockquote.pullquote {
  margin: 1.5rem 0
  padding: 1.25rem 1.5rem
  border-radius: 12px
  background: linear-gradient(135deg, #fff 0%, #f8fbff 50%, #eef6ff 100%)
  border: 2px solid transparent / permite mostrar el gradient border con outline /
  box-shadow: 0 6px 18px rgba(10,30,60,0.08)
  position: relative
  color: #073b6b
  font-size: 1.05rem
  line-height: 1.55
}

/ Borde con efecto gradiente (uso de pseudo-elemento) /
.wp-block-pullquote::before,
.pullquote::before,
blockquote.pullquote::before {
  content: 
  position: absolute
  inset: -2px / extiende fuera del bloque para simular un borde /
  z-index: -1
  border-radius: 14px
  background: linear-gradient(90deg, #7dd3fc, #60a5fa, #a78bfa)
  filter: blur(8px)
  opacity: 0.22
}

Notas

El pseudoelemento ::before aquí crea un halo/contorno degradado sin alterar el contenido del bloque.
El uso de position: relative en el contenedor y position: absolute en el pseudo-elemento permite el control perfecto del overlay.
Si quieres que el borde degradado aparezca nítido, reduce o elimina filter: blur().

Variante: borde nítido con gradiente (sin pseudo-elemento)

Si prefieres un borde claramente definido sin desenfoque, puedes usar background-clip para crear un borde degradado y fondo interno sólido.

.gradient-border {
  padding: 1rem
  border-radius: 10px
  background: linear-gradient(90deg, #ff7a7a, #ffd37a) border-box
  -webkit-background-clip: padding-box, border-box
  background-clip: padding-box, border-box
  border: 4px solid transparent
  background-origin: border-box
  background-image:
    linear-gradient(white, white), / fondo interior /
    linear-gradient(90deg, #ff7a7a, #ffd37a) / borde degradado /
}

Iconos y comillas estilizadas

Agregar una comilla grande o icono aporta carácter. Usa pseudo-elementos para mantener el HTML limpio.

.blockquote-icon {
  position: relative
  padding-left: 3.25rem
}
.blockquote-icon::before {
  content: “
  position: absolute
  left: 0.75rem
  top: -0.25rem
  font-size: 3.2rem
  color: rgba(6, 78, 59, 0.12)
  font-family: Georgia, serif
  line-height: 1
}

Responsive y tipografía

Asegúrate de que los pullquotes se vean bien en móviles. Ajusta tipografía y espaciado con media queries.

@media (max-width: 600px) {
  .wp-block-pullquote {
    padding: 0.9rem 1rem
    font-size: 0.98rem
    border-radius: 8px
  }
  .blockquote-icon::before {
    font-size: 2.6rem
    left: 0.5rem
  }
}

Interacción: hover y focus accesible

Añade microinteracciones cuidando la accesibilidad (contraste y foco teclado).

.wp-block-pullquote:hover,
.wp-block-pullquote:focus-within {
  transform: translateY(-3px)
  transition: transform 220ms ease, box-shadow 220ms ease
  box-shadow: 0 16px 40px rgba(10,30,60,0.12)
}

/ Asegurar foco visible para teclas de acceso /
.wp-block-pullquote:focus-within {
  outline: 3px solid rgba(96,165,250,0.22)
  outline-offset: 4px
}

Compatibilidad RTL y temas oscuros

Para soportar RTL (direcciones de derecha a izquierda) evita usar border-left si no controlas la lógica usa utilidades lógicas o selectors basados en dir.

:root[dir=rtl] blockquote,
html[dir=rtl] blockquote {
  border-left: none
  border-right: 4px solid #ccc
  padding-left: 1rem
  padding-right: 1.25rem
}

Para temas oscuros detecta preferencia con media query o clases del theme:

@media (prefers-color-scheme: dark) {
  blockquote, .wp-block-pullquote {
    background: linear-gradient(180deg, #02121a, #031827)
    color: #dbeafe
    box-shadow: none
  }
}

Cómo añadir el CSS a WordPress

Apariencia → Personalizar → CSS adicional: método rápido para pruebas y ajustes.
Archivo style.css del child theme: método recomendado para producción.
Enqueue en functions.php: necesario si distribuyes un plugin o quieres cargar CSS condicionado.

Ejemplo de enqueue en functions.php

/ functions.php (child theme) /
function theme_enqueue_pullquote_styles() {
  wp_enqueue_style(
    theme-pullquote-styles,
    get_stylesheet_directory_uri() . /css/pullquote.css,
    array(),
    1.0
  )
}
add_action(wp_enqueue_scripts, theme_enqueue_pullquote_styles)

Registrar un estilo de bloque para Gutenberg (opcional)

Puedes ofrecer estilos alternativos para el bloque pullquote mediante register_block_style. El siguiente snippet añade una variante accent que aparece en el inspector de bloques.

/ functions.php /
function mytheme_register_pullquote_style() {
  if ( function_exists( register_block_style ) ) {
    register_block_style(
      core/pullquote,
      array(
        name  => accent,
        label => Accent Pullquote
      )
    )
  }
}
add_action( init, mytheme_register_pullquote_style )

Buenas prácticas y accesibilidad

Mantén contraste suficiente entre texto y fondo (WCAG AA mínimo 4.5:1 para texto normal cuando sea posible).
No uses solo color para diferenciar complementa con bordes o iconos.
Evita fuentes demasiado pequeñas o interlineados reducidos en mobile.
Si usas animaciones, asegúrate de que sean suaves y que respeten la preferencia reduce-motion.

@media (prefers-reduced-motion: reduce) {
  .wp-block-pullquote,
  .wp-block-pullquote:hover {
    transition: none
    transform: none
  }
}

Checklist final antes de publicar

Probar en varios navegadores y tamaños de pantalla.
Verificar en temas con esquemas oscuros o personalizados.
Comprobar lectura por lectores de pantalla (si hay elementos decorativos, marcarlos con aria-hidden si corresponde).
Usar clases reutilizables para mantener consistencia y facilitar cambios globales.

Recursos útiles

Documentación y patrones oficiales: https://developer.wordpress.org

SushiHost