Generador de UUID
Genera UUID aleatorios en lote.
Generador de degradados CSS
Diseña un degradado lineal, radial o cónico y copia el CSS.
Paradas de color
0%
100%
Tus archivos se quedan en tu dispositivo
Cómo funciona
- 1Elige lineal, radial o cónico.
- 2Ajusta el ángulo, o la forma en el caso del radial.
- 3Elige los colores y arrastra cada parada a su posición. Añade paradas con Añadir parada de color.
- 4Copia el CSS y pégalo en tu hoja de estilos.
Qué hace cada opción
- Lineal
- Los colores se mezclan a lo largo de una línea recta. El ángulo fija la dirección: 0 grados va hacia arriba, 90 hacia la derecha, 180 hacia abajo.
- Radial
- Los colores se extienden desde el centro, como un círculo o una elipse.
- Cónico
- Los colores giran alrededor del centro como una rueda de color o un gráfico circular. El ángulo rota el comienzo.
- Paradas de color
- Cada parada es un color en una posición de 0 a 100 por ciento. Hasta ocho.
Privacidad
Todo funciona en tu navegador. Nada de lo que escribes se envía a un servidor.
Preguntas frecuentes
¿Qué navegadores admiten estos degradados?
Los degradados lineales y radiales funcionan en todos los navegadores actuales. Los degradados cónicos funcionan en todas las versiones actuales de Chrome, Edge, Firefox y Safari.
¿Cómo hago un borde duro en lugar de una mezcla?
Pon dos paradas en la misma posición, por ejemplo rojo al 50% y azul al 50%. No hay distancia de mezcla entre ellas, así que el cambio es brusco.
¿Puedo usarlo como color de texto o de borde?
Sí. Usa el mismo valor en background-image, junto con background-clip: text para el texto, o border-image para los bordes.
¿Por qué la página muestra un color distinto al que elegí?
El selector de color usa valores hex sRGB. Las pantallas con gamas de color amplias pueden mostrarlos de forma ligeramente distinta, pero los valores CSS son exactos.
¿Cómo añado transparencia?
Esta herramienta da colores hex sólidos. Edita el código y cambia un color por un hex de ocho dígitos como #4f46e580, o por rgba().