Herramientas de CSS

Genera CSS limpio y listo para copiar y pegar de forma visual con estas herramientas gratuitas: sombras de caja, degradados, border-radius, flexbox, grid, animaciones, clip-paths y filtros, con una vista previa en vivo mientras ajustas cada valor.

Sombras, filtros y acabados

⬛

Generador de Box Shadow CSS

Diseña una box-shadow visualmente con vista previa en vivo y copia el CSS.

Generador de Text Shadow CSS

Diseña una text-shadow con vista previa en vivo y copia el CSS.

◳

Generador de neumorfismo

Crea sombras neumórficas de soft-UI con vista previa en vivo y copia.

▢

Generador de Glassmorphism

Crea el CSS de una tarjeta de vidrio esmerilado con desenfoque, transparencia, saturación y un color de tinte.

☼

Generador de filtros CSS

Compón filtros CSS con controles deslizantes y vista previa en vivo, luego copia.

T○

Contorno de texto CSS

Añade un contorno o trazo al texto y copia el CSS.

▌

Estilizador de barra de desplazamiento CSS

Estiliza una barra de desplazamiento personalizada y copia el CSS de ::-webkit-scrollbar.

Formas, degradados y fondos

⬭

Generador de Border Radius CSS

Ajusta el radio de cada esquina con vista previa en vivo y copia el CSS.

◇

Generador de clip-path CSS

Recorta un elemento en formas comunes y copia el CSS de clip-path.

▲

Generador de Triángulos CSS

Genera un triángulo de puro CSS en cualquier dirección y copia el CSS.

▤

Generador de Gradientes CSS

Crea un gradiente lineal o radial con vista previa en vivo y copia el CSS.

▩

Patrón de fondo CSS

Genera un patrón de fondo CSS con dos colores y cópialo.

Maquetación y diseño adaptable

⬓

Área de Pruebas de CSS Flexbox

Experimenta con las propiedades de flexbox en una vista previa en vivo y copia el CSS generado.

▦

Generador de CSS Grid

Genera una maquetación con CSS grid con columnas, filas y espaciado ajustables, con vista previa en vivo.

Generador de media queries CSS

Crea una @media query responsiva con ajustes predefinidos y cópiala.

▭

Caja de relación de aspecto CSS

Genera una caja de relación de aspecto adaptable con una alternativa de padding.

‖

Diseño multicolumna CSS

Genera un diseño de texto multicolumna CSS con una línea divisoria.

Movimiento, transformaciones y animación

⤢

Generador de CSS Transform

Combina translate, rotate, scale y skew en una sola transformación CSS con vista previa en vivo.

⤿

Generador de animaciones CSS

Crea una animación con fotogramas clave, previsualízala en vivo y copia el CSS.

⌒

Generador de Curvas de Easing CSS

Elige o crea una curva de easing cubic-bezier y reprodúcela en un punto de vista previa animado.

◜

Generador de spinner CSS

Genera un spinner de carga con CSS puro y copia el CSS.

Ninguna herramienta coincide.