Diseño
Colores, paletas e íconos
Paleta de Colores
Genera paletas complementarias, análogas y triádicas desde un color
LocalGenerador de Degradados
Crea degradados CSS personalizados y copia el código
LocalEditor de Íconos SVG
Ajusta color, trazo y tamaño de un ícono SVG
LocalExtractor de Colores de Imagen
Obtén la paleta de colores dominantes de cualquier imagen
LocalVerificador de Contraste de Color (WCAG)
Verifica si dos colores cumplen los estándares de accesibilidad WCAG
LocalGenerador de Sombras CSS (box-shadow)
Crea sombras CSS personalizadas y copia el código box-shadow
LocalGenerador de Botones CSS
Diseña botones CSS personalizados y copia el código HTML/CSS
LocalGenerador de Border-Radius CSS (formas orgánicas)
Crea formas orgánicas y 'blobs' con border-radius CSS
LocalGenerador de Tarjetas CSS (Cards)
Diseña tarjetas CSS personalizadas y copia el código HTML/CSS
LocalGenerador de Spinners CSS (indicadores de carga)
Crea indicadores de carga (spinners) animados en CSS puro
LocalGenerador de Avatar con Iniciales
Crea un avatar circular con las iniciales de un nombre
LocalGenerador de Imagen Placeholder
Genera una imagen de relleno con las dimensiones y color que quieras
LocalConversor de Color a Tailwind CSS
Encuentra el color de Tailwind CSS más cercano a un HEX
LocalGenerador de Glassmorphism CSS
Crea el efecto de vidrio esmerilado (glassmorphism) en CSS
LocalOptimizador de SVG
Reduce el peso de un archivo SVG eliminando código innecesario
LocalGenerador de Patrones de Fondo CSS
Crea patrones de fondo (rayas, puntos, cuadrícula) en CSS puro
LocalGenerador de Textura de Ruido (Noise)
Crea una textura de ruido/grano sutil para fondos de diseño
LocalSimulador de Daltonismo
Mira cómo se vería una imagen para una persona con daltonismo
LocalGenerador de Mockup de Teléfono
Coloca una captura de pantalla dentro de un marco de teléfono
LocalGenerador de Sombra de Texto CSS
Crea el código text-shadow con vista previa en vivo
LocalGenerador de Armonía de Colores
A partir de un color, genera esquemas complementarios, análogos y tríadas
LocalGenerador de Imagen Open Graph
Crea la imagen de vista previa (1200x630) para compartir en redes sociales
LocalConversor de Unidades de Color
Convierte un color entre HEX, RGB y HSL simultáneamente
LocalGenerador de Iconos SVG Básicos
Genera formas SVG simples (círculo, estrella, corazón...) personalizables
LocalGenerador de Sombras Neumórficas CSS
Crea el efecto de diseño suave "neumorphism" con dos sombras CSS
LocalGenerador de Escala Tipográfica
Genera una escala de tamaños de fuente armónica para tu sistema de diseño
LocalGenerador de Paleta de Colores Accesible
Encuentra combinaciones de texto y fondo que cumplen con WCAG a partir de un color
Sobre Diseño
Generadores visuales para diseñadores y desarrolladores frontend que necesitan un componente de CSS listo para copiar sin abrir Figma para algo tan simple: paletas de colores complementarias/análogas/triádicas, degradados CSS, formas orgánicas (blobs) con border-radius, tarjetas (cards), botones, spinners de carga, sombras (box-shadow), efecto de vidrio esmerilado (glassmorphism), verificador de contraste de color según el estándar WCAG de accesibilidad, conversor de un color HEX al tono de Tailwind CSS más cercano, editor de íconos SVG, avatar con iniciales, e imágenes de relleno (placeholder) para maquetar un diseño antes de tener el contenido final. Cada generador incluye una vista previa en vivo que se actualiza mientras ajustas los controles, y un botón para copiar el código HTML/CSS resultante directamente a tu proyecto, sin necesidad de escribirlo desde cero ni memorizar sintaxis poco intuitiva (como el hecho de que border-radius en realidad acepta hasta ocho valores distintos). Pensado para acelerar ese primer borrador visual de un componente, no para reemplazar un editor de diseño completo cuando el proyecto lo amerita.