Skip to main content
🎨

Herramientas de Herramientas de diseño

Generadores CSS, herramientas de color y creación de SVG

26 herramientas
🎨

Convertidor de códigos de color

Convierte entre códigos de color HEX, RGB y HSL. Usa el selector de color y la vista previa en tiempo real para una selección intuitiva.

🎨

Selector de color

Selecciona colores de forma intuitiva usando una rueda de color y deslizadores. Obtén y copia códigos de color en formatos HEX, RGB y HSL.

🎨

Extractor de Colores de Imagen

Detecta automáticamente los colores dominantes de una imagen y genera una paleta de colores. También puedes hacer clic en cualquier parte de la imagen para seleccionar colores individuales.

🎯

Selector de Color Promedio de Imagen

Calcula el color promedio de una imagen completa o de un área seleccionada. Útil para elegir esquemas de color o colores de fondo de miniaturas.

🌈

Generador de degradados CSS

Crea degradados CSS visualmente con controles de arrastre. Admite tipos de degradado lineal, radial y cónico con preajustes.

🔲

Generador de CSS Box Shadow

Crea CSS box-shadow visualmente con deslizadores. Admite múltiples sombras y sombras interiores.

Generador de CSS Border Radius

Genera CSS border-radius con controles individuales para cada esquina. Incluye opciones de radio elíptico y preajustes de formas populares.

Generador de CSS Text Shadow

Genera CSS text-shadow con vista previa en vivo. Superpone múltiples sombras con preajustes de neón, relieve y más.

🔺

Generador de triángulos CSS

Genera triángulos CSS usando la propiedad border. Admite las 8 direcciones con tamaño y color personalizables.

✂️

Generador de CSS Clip Path

Crea formas CSS clip-path visualmente con arrastrar y soltar. Incluye polígono, círculo, elipse y preajustes como estrella y corazón.

🪟

Generador de CSS Glassmorphism

Crea efectos de UI de vidrio esmerilado con vista previa en vivo y salida CSS. Ajusta la transparencia, desenfoque, borde y sombra.

Generador de cargadores CSS

Elige entre múltiples animaciones de carga CSS y obtén el código. Personaliza color, tamaño y velocidad para spinners, puntos, barras y más.

📐

Generador de CSS Flexbox

Crea layouts Flexbox visualmente y genera código CSS. Ajusta todas las propiedades con una hoja de referencia integrada.

📈

Generador de CSS Cubic Bezier

Crea visualmente curvas de aceleración para animaciones CSS. Arrastra los manejadores y previsualiza las animaciones en tiempo real.

🎨

Generador de tonalidades de color

Genera variaciones de tonalidades de claro a oscuro de cualquier color. Ajusta el número de pasos y exporta como paleta de Tailwind CSS.

🎨

Mezclador de colores

Mezcla dos o más colores en proporciones específicas para crear nuevos colores. Compara resultados en diferentes espacios de color como RGB, HSL y LAB.

🎨

Generador de paleta de colores

Genera paletas de colores a partir de un color base usando teoría del color. Incluye esquemas complementarios, análogos, triádicos y más.

🔤

Vista Previa de Fuentes Web

Previsualiza fuentes web de Google Fonts en tiempo real. Compara múltiples fuentes ajustando tamaño y color.

🎨

Referencia de colores HTML

Explora los 148 colores con nombre de HTML/CSS en un solo lugar. Busca, previsualiza y copia códigos HEX fácilmente.

🔲

Generador de patrones de fondo CSS

Genera patrones de fondo usando CSS puro. Personaliza rayas, puntos, cuadros y más con un editor visual.

📜

Generador de barras de desplazamiento CSS

Personaliza el diseño de barras de desplazamiento CSS con un editor visual. Ajusta color, ancho, radio de borde y copia el código directamente.

🌈

Generador de texto con gradiente CSS

Genera código CSS para aplicar gradientes al texto. Previsualiza colores, dirección y ajustes de rango en tiempo real.

☑️

Generador de casillas de verificación CSS

Crea casillas de verificación CSS personalizadas con un editor visual. Personaliza libremente animaciones, colores y formas.

🔘

Generador de interruptores CSS

Crea interruptores CSS personalizados con un editor visual. Ajusta tamaño, color y animación, luego exporta el código.

🫧

Generador de blobs SVG

Genera automáticamente formas blob orgánicas en SVG. Ajusta la aleatoriedad y complejidad para decoraciones de diseño web.

🔷

Generador de patrones SVG

Genera patrones SVG repetibles en mosaico. Personaliza el tipo de patrón, color y tamaño, luego exporta el código.