Diseño y CSS
Genera CSS de forma visual: sombras, degradados, diseños flexbox y grid, animaciones y paletas de color
Crea CSS de forma visual y copia el código: sombras de caja y de texto, degradados y degradados de malla, diseños con flexbox y grid, bordes redondeados, clip-path, filtros, transformaciones, animaciones y efectos glassmorphism o neumorphism. Los generadores de paletas y tonos te ayudan a construir un sistema de color coherente, y los de ondas, blobs y patrones SVG crean fondos ligeros.
Herramientas en esta categoría: 18
Buenos puntos de partida
Todas las herramientas de esta categoría
-
Generador de animaciones CSS
Crea animaciones CSS @keyframes a partir de predefinidos o tus propios fotogramas clave; ajusta duración, retraso, repeticiones, dirección, relleno y curva cubic-bezier.
-
Generador de border-radius
Genera border-radius CSS con esquinas independientes, radios elípticos X/Y, unidades px o % y formas de mancha predefinidas. Produce la forma abreviada válida más corta.
-
Generador de clip-path
Crea formas clip-path de CSS: polígonos con puntos arrastrables y predefinidos, círculo, elipse e inset con esquinas redondeadas. Vista previa en vivo y código.
-
Generador de paletas de colores
Genera paletas de colores desde un color base con armonías complementaria, análoga, triádica, tetrádica, cuadrada o monocromática. Bloquea colores y exporta a CSS/Tailwind.
-
Generador de tonalidades de color
Convierte un color en una escala 50–950 al estilo de Tailwind, además de tintes, sombras y tonos. Calculado en OKLCH y sRGB y exportado como variables CSS, Tailwind o JSON.
-
Generador de box-shadow CSS
Crea box-shadow de CSS de forma visual: apila varias capas, ajusta desplazamientos, desenfoque, expansión, inset y opacidad RGBA, con vista previa en vivo y código limpio.
-
Generador de Flexbox CSS
Ajusta flex-direction, wrap, justify-content, align-items, gap y el flex, order y align-self de cada elemento de forma visual, con hijos en vivo y CSS para copiar.
-
Generador de degradados CSS
Diseña degradados CSS lineales, radiales y cónicos con paradas de color arrastrables, ángulos, modo repetido e interpolación OKLCH. Vista previa en vivo y código.
-
Generador de CSS Grid
Crea diseños CSS Grid de forma visual: grid-template-columns/rows, áreas con nombre validadas, gaps, alineación y colocación de cada elemento. Copia CSS limpio.
-
Generador de filtros CSS
Combina funciones de filter CSS (blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow) sobre una muestra o tu propia imagen.
-
Generador de glassmorphism
Genera CSS de cristal esmerilado con desenfoque y saturación de backdrop-filter, color y opacidad del tinte, borde y sombra, con el prefijo -webkit- para Safari.
-
Generador de degradados de malla
Crea fondos CSS suaves tipo malla con degradados radiales superpuestos. Arrastra puntos de color, ajusta la expansión, genera al azar con semilla y copia CSS puro.
-
Generador de neumorfismo
Genera CSS soft UI (neumorfismo): sombras clara y oscura derivadas de tu color base, formas plana, cóncava, convexa o presionada y cuatro direcciones de luz.
-
Generador de patrones CSS
Crea patrones de fondo con CSS puro —puntos, lunares, rayas, tablero de ajedrez, cuadrícula, zigzag y cruces— con colores, tamaño de mosaico y grosor. Sin imágenes.
-
Generador de blobs SVG
Crea formas blob SVG orgánicas y suaves con puntos, aleatoriedad y semillas ajustables. Relleno sólido, degradado o contorno; descarga el .svg o copia el data URI CSS.
-
Generador de ondas SVG
Genera ondas SVG suaves, en picos o escalonadas, con capas, amplitud y semillas. Descarga el .svg o cópialo como data URI de fondo CSS para separadores de secciones.
-
Generador de text-shadow
Crea efectos text-shadow de CSS con varias capas: resplandores, contornos, 3D retro y texto en relieve. Vista previa en vivo con tu propio texto y código para copiar.
-
Generador de transform CSS
Genera valores transform de CSS: translate, rotate, scale, skew y perspective 3D, rotateX/rotateY y translateZ, con transform-origin y vista previa en vivo.
Otras categorías
- CRC Algoritmos de verificación de redundancia cíclica para detección de errores
- MD Algoritmos de resumen de mensajes (MD2, MD4, MD5)
- SHA-1 Algoritmo Hash Seguro 1 - función hash de 160 bits
- SHA-2 Familia de Algoritmo Hash Seguro 2 (SHA-224, SHA-256, SHA-384, SHA-512)
- SHA-3 Algoritmo Hash Seguro 3 basado en Keccak
- Keccak Función hash criptográfica Keccak
- SHAKE Funciones de salida extensible (SHAKE128, SHAKE256)
- cSHAKE Funciones SHAKE personalizables
- KMAC Código de autenticación de mensajes Keccak
- Contraseñas y Seguridad Herramientas de generación, análisis, hash y seguridad de contraseñas
- Cifrado y Criptografía Cifrado simétrico y asimétrico, HMAC y generación de claves (AES, 3DES, RSA, PGP)
- Codificación Codifica y decodifica datos: Base64, Base32, Base58, URL, entidades HTML, hexadecimal, Unicode y más
- Formateadores Formatea, minifica y valida código y datos (JSON, XML, YAML, SQL, HTML, CSS) y convierte estilos de nombres
- Generadores Genera ID, claves, datos de prueba, códigos QR, códigos de barras y archivos de configuración (UUID, claves de API, .gitignore, Dockerfile)
- Convertidores Convierte formatos de datos, bases numéricas, colores, marcas de tiempo, unidades y divisas (JSON, CSV, YAML, XML)
- Herramientas de Texto Cuenta, compara, limpia y transforma texto (recuento de palabras, diferencias, regex, mayúsculas, duplicados)
- Herramientas de Imagen Herramientas para manipular y convertir imágenes (Comprimir, Redimensionar, Convertir)
- Herramientas Web Herramientas para desarrollo web y SEO (JWT, URL, DNS, cabeceras HTTP, metaetiquetas, sitemaps)
- Matemáticas y Calculadoras Calculadoras de finanzas, salud, porcentajes, aritmética para programadores y matemáticas cotidianas
- Hora y Fecha Zonas horarias, diferencias entre fechas, días hábiles, temporizadores, cronómetro y reloj mundial