Generador de degradados CSS
Genera código CSS para degradados lineales y radiales introduciendo colores, tipo y orientación.
Ejecutar herramienta
Este generador crea reglas de estilo CSS para fondos con degradados lineales y radiales listos para integrar en tus hojas de estilo o componentes web. La herramienta procesa tres campos de texto opcionales: el tipo de degradado, la orientación o ángulo deseado y la lista de valores de color separados por comas. Al escribir 'linear' en el campo de tipo, la herramienta añade la dirección indicada, como ángulos en grados o palabras clave del estándar CSS. Cuando introduces cualquier otro valor en el tipo, la salida adopta automáticamente una estructura radial con forma circular. La lista de colores admite formatos habituales como nombres de color, valores hexadecimales, RGB o HSL. La herramienta recorta los espacios en blanco sobrantes alrededor de cada tono y genera la sintaxis completa de la función CSS correspondiente. Así obtienes de inmediato el fragmento de código necesario para fondos decorativos, botones, tarjetas o encabezados en tus proyectos web.
Instrucciones
- Introduce el tipo de degradado en el campo correspondiente o mantén el valor predeterminado.
- Define la orientación, rumbo o ángulo deseado para el degradado.
- Escribe los colores que formarán la transición cromática, separándolos con comas.
- Pulsa el botón Generar para ver la función CSS en el panel de resultados.
Ejemplos
- Degradado lineal vertical: tipo linear, dirección to bottom, colores #4facfe, #00f2fe. Genera la función linear-gradient(to bottom, #4facfe, #00f2fe).
- Degradado radial multicolor: tipo radial, dirección to right, colores #ff9a9e, #fecfef, #a1c4fd. Genera la función radial-gradient(circle, #ff9a9e, #fecfef, #a1c4fd).
Preguntas frecuentes
¿Qué pasa si escribo un tipo de degradado que no sea linear?
Cualquier texto que no sea exactamente 'linear' hará que la herramienta cree un degradado radial con forma circular.
¿Cómo se deben separar los colores en la entrada?
Separa cada tono mediante comas. La herramienta elimina los espacios en blanco sobrantes alrededor de cada valor de color antes de unirlos.
¿Se admiten valores de color en formato hexadecimal o RGB?
Sí, puedes introducir valores hexadecimales, nombres CSS estándar, RGB o HSL dentro de la lista de colores.