Diseño y CSS

Convierte un fragmento de código en una imagen con resaltado de sintaxis en tu navegador, con más de 20 lenguajes, temas y fondos personalizados, números de línea y exportación a PNG o SVG.

Comprueba el contraste WCAG 2.1 y la puntuación APCA Lc entre texto y fondo, revisa las insignias AA, AAA y 3:1 y aplica el color válido más cercano.

Mezcla dos colores HEX en la proporción que elijas, en espacio RGB o Lab, y obtén el color intermedio como muestra y valor HEX copiable.

Convierte un color HEX base en una escala OKLCH, HSL o RGB con pasos ajustables, avisos de contraste WCAG por paso y exportación a CSS, Tailwind y JSON.

Sube una imagen y previsualiza cómo se ve con protanopía, deuteranopía, tritanopía o daltonismo total, y luego descarga el resultado simulado.

Ajusta los ocho valores de esquina de border-radius, incluidos los radios horizontal y vertical elípticos, para ver una vista previa en vivo y copiar el CSS abreviado.

Crea sombras CSS box-shadow de varias capas con controles de desplazamiento, desenfoque, expansión, color e inset y copia la propiedad lista para usar.

Convierte un tamaño de fuente mínimo y máximo junto con un ancho de viewport mínimo y máximo en una sola expresión clamp() de tipografía fluida sin puntos de quiebre.

Crea un clip-path CSS a partir de presets de círculo, elipse, polígono, inset o inset redondeado con campos numéricos, previsualízalo en vivo y copia la propiedad lista para usar.

Edita una aceleración CSS cubic-bezier o steps() arrastrando los tiradores, previsualízala con una animación en vivo y copia el valor generado.

Crea CSS Flexbox o Grid de forma visual con controles de contenedor y por elemento, tamaño de pistas personalizado y editor de grid-template-areas, y copia el CSS.

Genera CSS de cristal esmerilado con controles de desenfoque, transparencia, saturación, borde y sombra más un color de tinte, previsualízalo sobre un fondo y copia el CSS basado en backdrop-filter.