Generador de degradado CSS: lineal y radial en línea

Type

Angle:

Color 1

Color 2

CSS

Share X / Twitter Facebook LinkedIn WhatsApp

Cómo usar Generador de gradiente CSS

Elige tus colores: empieza con dos; los tonos vecinos se mezclan de forma más limpia.
Establece la dirección: un ángulo como 135 grados, o radial para centrar hacia afuera.
Mira la vista previa en vivo e itera: todo se trata de la edición manual.
Copia el CSS en tu hoja de estilos como fondo del elemento.

¿Cuál es Generador de gradiente CSS?

Un generador de gradiente CSS crea el código linear-gradient() / radial-gradient() visualmente: elige los colores y la dirección, mira la vista previa en vivo, copia el CSS. La sintaxis que escribe (background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)) es fácil de leer pero tediosa de iterar a mano; el bucle visual hace que probar diez variantes tome un minuto.

Los degradados ganan su ubicuidad: agregan profundidad y pulido para cero bytes de descarga de imágenes, escalan a cualquier tamaño sin pérdidas y animan/adaptan de maneras que los fondos de mapa de bits no pueden. Cada sección de héroe, brillo de botón y fondo de tarjeta en un diseño moderno son algunas paradas de degradado.

Sobre el Generador de gradiente CSS

Elija dos o más colores, establezca el ángulo o la dirección, vea la actualización de la vista previa en vivo y copie el CSS listo para producción.

Elabore notas para degradados que parezcan diseñados en lugar de predeterminados: los tonos vecinos se mezclan limpiamente (azul→púrpura, naranja→rosa) mientras que los opuestos (rojo→verde) pasan por un punto medio gris fangoso; diríjase a través de una tercera parada si debe cruzar la rueda; ritmos sutiles y fuertes para los fondos (dos tonos del mismo tono indican profundidad, arcoíris de neón indican 2010); y 135 grados (de arriba a la izquierda a abajo a la derecha) es la dirección predeterminada más favorecedora para las superficies de la interfaz de usuario.

Más allá de los fondos: los degradados rellenan el texto (mediante un clip de fondo), dibujan bordes (imagen de borde o envoltorios acolchados) y tiñen las fotos a través de capas superpuestas. El código copiado funciona en todas partes: la compatibilidad es universal en los navegadores modernos y no se necesitan prefijos.

Preguntas Frecuentes

fondo: gradiente lineal (135 grados, #color1, #color2): primero el ángulo (0 grados apunta hacia arriba, 90 grados hacia la derecha), luego el color se detiene en orden. Los porcentajes después de los colores controlan dónde se ubica cada parada.

Los dos colores se encuentran en la rueda de colores (rojo → verde, naranja → azul), y la ruta RGB recta entre ellos pasa por el gris. Solución: inserte un tope intermedio alrededor del barro o elija tonos más cercanos.

Lineal para superficies direccionales (héroes, botones, cartas); radial para efectos de brillo central (focos, orbes, viñetas). Linear cubre el 90% del uso de la interfaz de usuario.

Bandas de color: muy pocos muestran colores en una transición larga y sutil. Mitigaciones: acorte la distancia del gradiente, elija paradas un poco más distantes o superponga una textura de ruido débil. Menos común en las pantallas modernas.

No es que el color se detenga directamente (CSS aún no puede realizar la transición en todos los navegadores), pero los clásicos funcionan: animar la posición del fondo sobre un degradado de gran tamaño para obtener un brillo en movimiento, o fundir la opacidad de dos capas de degradado.