Aprender Tailwind CSS Efectos visuales

Este módulo aborda las utilidades de efectos visuales de Tailwind CSS 4, que permiten añadir profundidad, movimiento y riqueza gráfica a las interfaces sin necesidad de escribir CSS personalizado.

Degradados

Las utilidades de degradado de Tailwind CSS cubren tres tipos de gradiente: lineal (bg-gradient-to-*), radial (bg-radial) y cónico (bg-conic). Se definen los colores de parada con from-*, via-* y to-*, y se pueden personalizar mediante la directiva @theme en CSS.

Sombras

Tailwind CSS 4 ofrece un sistema de sombras completo que incluye sombras exteriores (shadow-*), sombras interiores (inset-shadow-*), sombras de texto (text-shadow-*) y anillos (ring-*, inset-ring-*). Cada tipo admite personalización de tamaño, color y opacidad.

Filtros y efectos

Las utilidades de filtros permiten aplicar efectos como desenfoque (blur-*), brillo (brightness-*), contraste (contrast-*), escala de grises (grayscale), sepia (sepia) y rotación de tono (hue-rotate-*). También se incluyen los filtros de fondo (backdrop-blur-*, backdrop-brightness-*) para efectos de glassmorphism, y las utilidades de máscara (mask-*).

Transformaciones 3D

Tailwind CSS 4 introduce soporte nativo para transformaciones tridimensionales: perspectiva (perspective-*), rotaciones en los ejes X, Y y Z (rotate-x-*, rotate-y-*, rotate-z-*), traslaciones en el eje Z (translate-z-*) y control del estilo de transformación (transform-style-3d, backface-hidden). Estas utilidades permiten crear efectos como tarjetas con giro 3D y galerías con profundidad.