Generador de efectos de filtro SVG Diseña efectos SVG visualmente. Elige una primitiva de filtro — desenfoque gaussiano, variantes de matriz de color (giro de tono, saturación, luminancia a alfa), turbulencia con desplazamiento, sombra de piso, o un preset de matriz de convolución (brillo, grabado, agudeza, detección de bordes)— y ajusta sus parámetros con deslizadores mientras observas una vista en tiempo real de SVG en texto, ...
Pruebe la herramienta »Generador de animación de carga en CSS Crea ocho animaciones populares de carga en CSS puro — anillo giratorio, dos anillos, puntos pulsantes, puntos que saltan, bola que salta, barras de equalizer, círculo pulsante y indicador de escritura. Ajusta el color, el tamaño, el ancho de trazo y la duración; observa que la vista en tiempo real se actualiza instantáneamente; copia los @keyframes más el HTML mínimo en tu proyecto. Cero JavaScript, cero...
Pruebe la herramienta »Generador de Ruido y Texturas SVG Cree ruido orgánico y texturas turbulentas directamente en su navegador usando el filtro feTurbulence de SVG. Arrastre los deslizadores, ajuste la semilla, elija un color de tono y vea cómo se actualiza la textura en tiempo real. Exporte como SVG en línea, una URL de imagen de fondo en CSS o un filtro SVG reutilizable que puede aplicarse ...
Pruebe la herramienta »Generador de códigos de color de terminal ANSI Crea secuencias de escape ANSI (selecciona códigos de representación gráfica) para colorear y estilizar la salida de la terminal. Elige un color de fondo y de fondo, activa estilos como negrita o subrayado, y obtén una cadena de escape lista para pegar junto con una vista en tiempo real de cómo se muestra en una terminal. Cómo usar: Introduce el texto de ejemplo...
Pruebe la herramienta »Generador de hoja de muestras de color Pega una lista de colores y ve inmediatamente una hoja imprimible con muestras de color y etiquetas en hex. Combina cualquier formato de color CSS que desees — hex corto y largo, rgb(), rgba(), hsl(), hsla(), o colores nombrados como tomate — y descarga la hoja como PNG de alta resolución o escalable...
Pruebe la herramienta »Convertidor de Espacio de Color Pega un color en cualquier formato común y ve inmediatamente cómo se representa en nueve espacios de color al lado. El convertidor detecta automáticamente HEX, RGB, HSL, HSV/HSB, CMYK, CIE LAB, LCH, CIE XYZ, Oklab y colores nombrados de CSS, luego calcula todas las demás representaciones utilizando corrección gamma de sRGB y el estándar D65...
Pruebe la herramienta »Convertidor de Textile y Yarn Cross-reference entre tamaños de agujas de tejer, tamaños de agujas de crochet y categorías de peso de hilo según las normas estadounidenses, británicas/canadienses, métricas y japonesas en un solo lugar. Útil cuando un patrón de un país menciona un tamaño de aguja o un nombre de hilo que no coincide con lo que aparece en tus suministros locales. Cómo usar: Elige una categoría...
Pruebe la herramienta »Generador de imagen de tarjeta social Open Graph Diseña imágenes de compartir perfectas en píxeles para Open Graph, Twitter Cards, LinkedIn y Facebook directamente en tu navegador. Escribe tu título, descripción y nombre del sitio, elige un diseño y un tema, luego descarga un PNG, JPG o WebP en las dimensiones exactas que cada plataforma exige — sin necesidad de herramientas de diseño ni subida...
Pruebe la herramienta »Generador de texto con gradiente CSS Diseña efectos de texto llamativos con gradientes de múltiples colores y código CSS listo para producción en un solo clic. Elige tus colores, selecciona lineal o radial, observa la actualización en tiempo real del previsualizador, luego copia el fragmento en tu hoja de estilo. Cómo usar Escribe el texto de ejemplo que deseas ver. Configura el tamaño y el peso de la fuente...
Pruebe la herramienta »Generador de CSS Neumóforo Crea elementos de interfaz suaves y con efecto de saliente "neumóforo" sin necesidad de ajustar manualmente dos sombras de caja opuestas. Elige un color base, selecciona una forma (plana, cóncava, convexa o presionada), arrastra los deslizadores para distancia, intensidad, borde y ángulo de luz, luego copia el CSS generado directamente en tu proyecto. Cómo usar Elige un color de fondo. El mismo color...
Pruebe la herramienta »Generador de tonos y tonalidades de color Elige un color en formato hex o RGB y obtén inmediatamente 10 tonos (tu color mezclado hacia el blanco) y 10 tonalidades (mezcladas hacia el negro) como muestras visuales. Haz clic en cualquier muestra para copiar su código en formato hex, o exporta el conjunto completo como propiedades personalizadas de CSS, variables de SCSS, JSON o una lista simple de hex. ...
Pruebe la herramienta »Generador de escalas de colores de Tailwind CSS Pega un solo color en formato hexadecimal y obtén inmediatamente una paleta completa de 50 a 950 en estilo Tailwind con pasos perceptivamente equilibrados. La escala se construye en el espacio de color OKLCH, por lo que cada paso se siente como un salto equilibrado en la luminosidad para el ojo humano — no solo una caída lineal en RGB o HSL. ...
Pruebe la herramienta »Canvas de Arte en Píxeles & Exportación en CSS Pintar sprites en estilo de 8 bits con precisión directamente en su navegador y exportarlos como arte de sombras de cajas en CSS, SVG escalable, PNG rasterizado o JSON portátil. El lienzo se escala desde 8×8 hasta 64×64, incluye paletas clásicas (NES, Game Boy, PICO-8, CGA, Commodore 64, Sweetie 16) y te ofrece pintura, borrador, ...
Pruebe la herramienta »Visualizador y editor de SVG Pega cualquier atributo d de una ruta SVG y veála renderizada en tiempo real. Esta herramienta descompone cada comando en sus parámetros y punto final absoluto, dibuja manejadores de control de Bezier sobre la vista previa y reescribe la ruta entre coordenadas absolutas y relativas con precisión configurable. Está diseñada para autores de SVG...
Pruebe la herramienta »Generador de Flexbox (Visual) Diseña diseños de Flexbox visualmente y copia CSS listo para producir. Ajusta la dirección, alineación, envoltura, espacio y sobrescripciones por elemento mientras una vista en tiempo real se actualiza instantáneamente. Sin adivinanzas, sin viajes a Chrome DevTools — simplemente elige el comportamiento del contenedor que necesitas, observa cómo se renderiza y obtén las reglas generadas. Cómo usar Elige una dirección de flex (fila, ...
Pruebe la herramienta »Generador de Marcas de README El Generador de Marcas de README crea insignias de calidad pixel a pixel en el estilo de Shields.io directamente en su navegador. Elija un modelo predeterminado o cree su propia etiqueta y mensaje, elija colores y un estilo (plano, cuadrado plano, para el logotipo o plástico), y obtenga salida lista para copiar en Markdown, HTML, SVG y URL de datos. Sin llamadas a APIs externos, sin dependencia de red, sin insignias rotas...
Pruebe la herramienta »Generador de animaciones CSS Crea animaciones CSS @keyframes visualmente con una vista en tiempo real. Elige entre 10 presets populares como bounce, shake, pulse, fade in, slide in, spin, swing, rubber band, flash y wobble — o crea tu propia animación de keyframes desde cero. Ajusta el tiempo, la interpolación, el número de iteraciones, la dirección y el modo de relleno, luego copia el ...
Pruebe la herramienta »Calculadora de Especificidad CSS La Calculadora de Especificidad CSS te ayuda a determinar la puntuación exacta de especificidad de cualquier selector de CSS. Comprender la especificidad es fundamental para depurar conflictos de CSS y escribir hojas de estilo mantenibles. Ingresa uno o más selectores y ve inmediatamente sus puntuaciones (a,b,c) comparadas lado a lado. Cómo usar Ingresa un selector de CSS por línea en ...
Pruebe la herramienta »Generador de filtros CSS El Generador de filtros CSS le permite crear efectos de filtro CSS visualmente con una vista previa de imagen en vivo. Ajuste las propiedades de filtro individuales utilizando controles deslizantes intuitivos y vea los resultados al instante, sin necesidad de adivinar. Una vez que esté satisfecho con el aspecto, copie el código CSS generado y péguelo directamente en su hoja de estilo. Cómo usar ...
Pruebe la herramienta »Simulador y verificador de daltonismo. Vea cómo se ven sus imágenes y paletas de colores para personas con deficiencia de visión del color. Simule 8 tipos de DVC y pruebe sus diseños para el cumplimiento del contraste WCAG para garantizar la accesibilidad para todos los usuarios. Cómo usar Cargue una imagen o ingrese valores de color para simular. Seleccione una deficiencia de visión del color ...
Pruebe la herramienta »Agregue herramientas IO a su navegador favorito para obtener acceso instantáneo y búsquedas más rápidas
Marcador es una forma divertida de llevar un registro de tus juegos, todos los datos se almacenan en tu navegador. ¡Próximamente habrá más funciones!
Actualizar: Nuestro última herramienta fue agregado el 17 de junio de 2026
Ayúdanos a seguir brindando valiosas herramientas gratuitas
