Entrada
Preparando tu espacio de trabajo…
Cómo usarlo
- Elige Lineal o Radial y define los dos colores.
- Ajusta las posiciones y, en el modo lineal, el ángulo.
- Copia el CSS y aplica la declaración background al elemento.
Controlar un degradado CSS
Un degradado CSS crea un fondo con colores en lugar de una imagen independiente. Se adapta al tamaño de una tarjeta, un banner o una sección y sigue siendo editable en CSS.
Este generador se centra en dos colores. Elige una dirección lineal o un degradado radial circular centrado y coloca las paradas para controlar el inicio y fin de la transición.
Dirección y paradas de color
El ángulo se aplica a los degradados lineales. El modo radial usa un círculo centrado en el elemento y no tiene control de ángulo.
Las posiciones van de 0 % a 100 %. Acercarlas estrecha la transición; poner ambas en el mismo punto crea un corte de color brusco.
#2563eb → #9333ea, 135 degreesbackground: linear-gradient(135deg, #2563eb 0%, #9333ea 100%);Degradado lineal de dos paradas con los colores y el ángulo indicados.
Qué representa la vista previa
La vista previa usa directamente el CSS generado. Sus proporciones pueden diferir de las del elemento de destino, especialmente en modo radial.
La primera parada no puede ir después de la segunda. El editor genera una capa con dos colores; añade más paradas o capas en tu hoja de estilos.
Aplicar la declaración
La salida copiada empieza por background:. Aplícala al selector adecuado y comprueba las imágenes, colores o propiedades abreviadas de fondo que pueda sustituir.
Entrada de texto de hasta 1 MiB. Las transformaciones de CSS y HTML se ejecutan en un worker con un límite de 30 segundos. Las herramientas de color usan sRGB; los estilos generados son vistas previas y deben probarse en tu propio diseño.
Preguntas frecuentes
¿Puedo añadir un tercer color?
Este editor admite dos paradas. Si necesitas más, copia el CSS y añade manualmente paradas separadas por comas.
¿Por qué no hay ángulo en modo radial?
Un degradado radial circular centrado se extiende desde el centro. El ángulo solo afecta al modo lineal.
¿Puedo crear una separación brusca entre colores?
Sí. Coloca ambas paradas en la misma posición para eliminar la transición.
¿Se genera un archivo de imagen?
No. Copiar CSS proporciona una declaración background. El navegador dibuja el degradado al aplicarla.
¿Por qué se ve distinto en mi elemento?
El tamaño y las proporciones del destino afectan al degradado. Comprueba el resultado en el elemento real, además de en la tarjeta de vista previa.