Ir al contenido
OneKitly
Registrarse · Entrar

Generador de degradados CSS

Crea un degradado CSS lineal o radial a partir de dos colores y un ángulo, con salida CSS y Tailwind.

Herramientas relacionadas

Todas las herramientas: Colores y CSS →
Comprobador de contraste de colorRelación de contraste WCAG entre texto y fondo, con aprobado/fallo AA/AAA y una vista previa.Inversor de colorInvierte un color (255 − RGB) o toma su complementario, en HEX/RGB/HSL/CMYK con el contraste.Generador de esquemas de colorDeriva esquemas complementario, análogo, triádico, tetrádico, dividido y monocromático de un color base.Compresor de CSSMinifica CSS eliminando comentarios y espacios para reducir el tamaño de tu hoja de estilos.Laboratorio de CSS FlexboxExperimenta con flex-direction, wrap, justify-content, align-items y gap — vista previa en vivo y CSS para copiar.Generador de CSS GridConstruye un layout CSS Grid visualmente — columnas, filas, espacios y alineación — con vista previa en vivo y CSS para copiar.Selector de color de imagenCarga una imagen, haz clic para muestrear cualquier píxel y extrae una paleta dominante, con HEX y RGB de cada muestra.Generador de fuentes para InstagramConvierte tu texto en decenas de fuentes Unicode listas para copiar en tu bio, pies de foto y comentarios de Instagram.

Abre Generador de degradados CSS y obtienes una respuesta al momento, sin crear ninguna cuenta. Su sitio está en Colores y CSS; Comprobador de contraste de color y Inversor de color responden a las preguntas más cercanas.

Cómo usarlo

  1. Abre la herramienta — sin registro ni instalación.
  2. Introduce tus datos o ajusta las opciones disponibles.
  3. Obtén tu resultado al instante y cópialo o descárgalo.

Preguntas frecuentes

¿Qué es Generador de degradados CSS?

Crea un degradado CSS lineal o radial a partir de dos colores y un ángulo, con salida CSS y Tailwind.

¿En qué casos se usa realmente?

Llevar un color de una herramienta de diseño a una hoja de estilos, construir una paleta alrededor de un color de marca y comprobar que el texto será legible sobre él.

¿Cuál es el error más frecuente?

Juzgar el contraste a ojo. Dos colores que parecen distintos en un monitor luminoso pueden suspender de lleno la ratio de accesibilidad, y esa ratio es lo que medirá una auditoría.

¿Hay una herramienta para el siguiente paso?

Inversor de color es el más cercano después de este: Invierte un color (255 − RGB) o toma su complementario, en HEX/RGB/HSL/CMYK con el contraste.

¿Qué más conviene tener abierto al lado?

Generador de esquemas de color y Compresor de CSS: aparecen en la misma tarea lo bastante a menudo como para merecer otra pestaña.

¿De dónde salen los datos?

Las conversiones entre HEX, RGB y HSL son exactas. El contraste sigue la fórmula de luminancia relativa de WCAG 2; el CMYK depende del dispositivo, así que un valor en pantalla es una aproximación de lo que se imprimirá.

Para saber más

Todas las guías →
ExplicaciónDegradados, bandeado y por qué el centro se ve turbioInterpolar en sRGB promedia números codificados en gamma: el punto medio de rojo a verde es #808000 cuando la respuesta a media luz es #bcbc00 — un 57,2 % menos de luz. El bandeado es otro problema aritmético: 8 bits dan 256 escalones, y un degradado oscuro puede tener sólo 28. Aquí están ambos, calculados.ExplicaciónLos esquemas de color son geometría sobre una rueda — y la rueda está malComplementario, tríada, análogo y complementario dividido no son más que rotaciones: suma 180°, 120°, 30° o 150° a un tono. La aritmética es trivial. El problema es que el círculo de tonos HSL no es perceptualmente uniforme — el amarillo y el azul con la misma luminosidad HSL difieren 12,85 veces en luminancia — así que una paleta generada hay que comprobarla luego en contraste.ExplicaciónRelación de contraste: cómo la calcula realmente la WCAGLa relación WCAG es (L1 + 0,05) ÷ (L2 + 0,05), y L es la luminancia relativa, no el brillo. El verde aporta el 71,52 % y el azul el 7,22 %, por eso el azul puro sobre blanco aprueba con 8,59:1 mientras el gris medio suspende con 3,95:1. Aquí está el cálculo completo, ejecutado de principio a fin.TutorialHEX vs RGB: cómo leer y convertir coloresHEX y RGB son dos notaciones para los mismos colores. Aquí tienes cómo leer cada una, convertir entre ellas y añadir transparencia.GuíaQué puede quitar un minificador y qué no debe tocarLa minificación tiene que preservar el significado, y lo interesante son los espacios que llevan significado: el combinador descendiente, los espacios dentro de calc(), el hueco entre dos elementos en línea. Medido aquí sobre archivos reales, incluido lo que brotli te iba a ahorrar de todas formas.ExplicaciónCómo funcionan de verdad las fuentes de Instagram (no son fuentes)Nada se estiliza. Cada letra se sustituye por otro carácter Unicode que resulta parecerse a negrita o cursiva, y por eso un lector de pantalla lee un galimatías y algunos dispositivos muestran cuadros vacíos.