¿Qué es Degradado a CSS?

Un constructor visual de degradados que te permite diseñar degradados lineales, radiales y cónicos con múltiples puntos de color y copiar el código CSS. Ajusta ángulos, posiciones y colores con vista previa en vivo.

Construye gradientes lineales, radiales o cónicos arrastrando paradas sobre una barra y viendo el preview en tiempo real. Pega un gradiente existente para editarlo en sitio, elige de la biblioteca de presets (Sunset, Aurora, Rainbow), ajusta el ángulo y copia la sintaxis. La salida es CSS plano, sin prefijos de navegador ni JavaScript.

Cómo usar

1. Elige el tipo de degradado (lineal, radial o cónico) y establece la dirección o el ángulo.
2. Añade, elimina o ajusta los puntos de color haciendo clic en la barra de degradado o usando los selectores de color.
3. Copia el código CSS generado para usarlo directamente en tu hoja de estilos.

Cuándo usar

• Diseñar el fondo de un hero donde necesitas control fino sobre paradas y ángulo.
• Actualizar un gradiente que ya existe en la hoja de estilos: pegar, editar visual, copiar.
• Generar un gradiente cónico para fondos tipo gráfico de tarta o loaders arcoíris.

Resultado

Prueba un degradado de atardecer: linear-gradient(135deg, #ff6b35 0%, #f72585 50%, #7209b7 100%) — ideal para el fondo de una sección hero.

Preguntas frecuentes

¿Cuál es la diferencia entre lineal, radial y cónico?

El lineal corre el color por un ángulo recto. El radial se abre desde un punto central en anillos concéntricos. El cónico gira alrededor de un punto central como un gráfico de tarta. Los tres aceptan la misma sintaxis de paradas.

¿Cómo importo un gradiente que ya tengo en el CSS?

Pega la declaración completa en el campo Import, por ejemplo background: linear-gradient(135deg, #ff6b35, #f72585);, y pulsa Import. El editor visual cargará el ángulo, las paradas y el tipo detectados.

¿Por qué se ven bandas en algunos monitores?

Las bandas aparecen cuando dos paradas distantes en tono coinciden con una pantalla de 8 bits. Mete una parada intermedia o reduce el rango angular. Los navegadores con render HDR muestran muchas menos bandas.

¿Puedo usar la salida como background-image?

Sí. La cadena copiada funciona como valor de background, background-image o cualquier propiedad CSS que admita imagen: border-image, mask, e incluso fill de SVG en navegadores modernos.

¿La salida añade prefijos como -webkit-?

No. Las gradientes lineales, radiales y cónicos han funcionado sin prefijo en todos los navegadores evergreen desde 2017. Añadir prefijos hoy solo ensucia la hoja de estilos.

Herramientas relacionadas