Elige lineal, radial o cónico, ajusta el ángulo y edita cada parada: la vista previa pinta la misma declaración que imprime el panel de salida. Las posiciones quedan entre 0 y 100 por ciento, el ángulo entre 0 y 360 grados y el banco admite de dos a ocho paradas.
Se ejecuta localmente en tu navegadorEl banco de trabajo empieza como linear-gradient(135deg, #0f9d66 0%, #2d5bff 55%, #7c3aed 100%). La vista previa pinta esa declaración y el panel de salida la imprime, así que el código que copias es el degradado que estabas viendo.
Cada control tiene un límite medido: el ángulo se mantiene entre 0 y 360 grados, las posiciones entre 0 y 100 por ciento y la lista entre dos y ocho paradas. Un valor fuera de rango se reescribe al límite al salir del campo, en lugar de que la vista previa lo use en silencio.
Tres paradas, 135 grados, lineal: son los valores con los que carga la página y los que restaura Restablecer. La salida es una sola declaración, .gradient-background { background: … ; }, ordenada por posición, así que una parada añadida entre 0 y 55 se imprime antes del 55 aunque se añadiera al final.
El ángulo solo existe para linear-gradient() y conic-gradient(). El cónico lo imprime como from 90deg at center; el radial imprime circle at center y ningún ángulo. Las posiciones se escriben con un decimal, la misma precisión que muestra el campo tras confirmar.
Un degradado necesita al menos dos paradas: con dos, el botón × avisa de que se necesitan al menos dos colores en lugar de eliminar una. Ocho es el techo: con ocho paradas el botón Añadir color se desactiva, así que el límite se ve en lugar de ser un clic que no hace nada.
Añadir usa el hueco mayor entre las paradas existentes, lo que mantiene la rampa regular: cuatro paradas desde el inicio quedan en 0, 28, 55 y 100 por ciento, y las ocho completas en 0, 14, 28, 42, 55, 67, 78 y 100. Invertir colores refleja cada posición (100 menos la posición) y da la vuelta a la lista; la declaración exportada siempre queda ordenada por posición.
Los colores son HEX de seis dígitos o el selector de color. La forma corta de tres dígitos, como #fff, no se expande: la página conserva el último degradado válido y pide seis dígitos, y hsl() o rgba() escritos en un campo HEX se rechazan igual.
No hay exportación a imagen, SVG o PNG, ni control de opacidad o de punto de interpolación, ni una segunda capa de degradado, ni forma de previsualizar la rampa dentro de tu propio contenedor. La declaración copiada del panel de salida es todo el producto.