Generador de degradados CSS

Crea un degradado lineal de dos colores, ajusta el ángulo y copia o descarga el CSS.

0° apunta hacia arriba; 90°, a la derecha; 180°, hacia abajo.

Vista previa

Degradado lineal de dos colores opacos. Comprueba el contraste del texto por separado.

Tus archivos se procesan aquí, en tu dispositivo

No enviamos el contenido de tus archivos o textos a un servidor de procesamiento. No necesitas una cuenta y no hay un cupo diario de operaciones. Cada herramienta tiene límites de tamaño para cuidar la memoria de tu dispositivo.

Necesitas conexión para cargar el sitio y sus recursos. El alojamiento puede recibir datos técnicos de las visitas. Los favoritos guardan solo identificadores de herramientas en este navegador.

Cómo tratamos tus datos →

Cómo usar esta herramienta

  1. Introduce los datos o carga el ejemplo de la herramienta.
  2. Elige las opciones y pulsa el botón principal.
  3. Comprueba el resultado antes de copiarlo o descargarlo.

Un ejemplo que puedes comprobar

Crea un degradado lineal de dos colores, ajusta el ángulo y copia o descarga el CSS.

Datos de ejemplo

#0F766E; #2563EB; 135°

Resultado esperado

background-color: #0F766E;
background-image: linear-gradient(135deg, #0F766E 0%, #2563EB 100%);

Comprueba el resultado antes de copiarlo o descargarlo.

Generador de degradados CSS: usos y recomendaciones

Elige dos colores HEX opacos de tres o seis cifras y un ángulo entero de 0 a 360 grados. En CSS, 0 grados apunta hacia arriba, 90 a la derecha y 180 hacia abajo. Los colores se sitúan al 0 y al 100 %; no se añaden paradas intermedias ni transparencia. La vista previa cambia con los controles, mientras que Generar CSS prepara el resultado que puedes copiar o descargar. Se incluye un color de fondo como alternativa y una propiedad background-image con linear-gradient. Pega las declaraciones dentro del selector que corresponda en tu hoja de estilos. El aspecto depende de las proporciones del elemento. El generador no comprueba automáticamente el contraste del texto colocado sobre el degradado.

Generador de degradados CSS. Empieza con el ejemplo y observa la relación entre la entrada y la salida antes de pegar un documento completo. El ejemplo es pequeño para que puedas comprobarlo sin otra aplicación. Después sustituye sus datos por una muestra representativa de tu caso y ajusta las opciones. El botón principal realiza la operación; cargar el ejemplo solo rellena los controles. Si modificas cualquier entrada después de calcular, se oculta el resultado anterior para que no copies una versión que ya no corresponde a los datos. Vuelve a ejecutar la operación después de cada cambio. Limpiar recupera los valores iniciales del formulario y descarta el resultado de la página. Copiar guarda el texto de salida en el portapapeles cuando el navegador lo permite. Descargar crea el archivo únicamente cuando lo solicitas expresamente; calcular no inicia descargas. Conserva una copia de la entrada por separado si necesitas repetir el trabajo más adelante, porque este formulario no es un archivo de proyectos ni mantiene un historial de operaciones.

Generador de degradados CSS. Comprueba una muestra breve cuyo resultado puedas anticipar y un caso distinto que incluya los detalles importantes de tu trabajo. Revisa tanto el comienzo como el final de la salida; un resultado aparentemente correcto puede pertenecer a una entrada anterior si has guardado varias copias fuera de la página. Si aparece un error, reduce la muestra hasta localizar el dato que lo provoca y revisa los límites indicados. No elimines información solo para que desaparezca un aviso: comprueba primero si la operación elegida representa lo que necesitas. Antes de utilizar una descarga en otro programa, ábrela y verifica los caracteres, la estructura y los valores. El archivo contiene el resultado, no las opciones del formulario. Si necesitas explicar cómo lo obtuviste, conserva también la entrada y las opciones utilizadas.

Una comprobación práctica antes de utilizar el resultado

Generador de degradados CSS. Crea un degradado lineal de dos colores, ajusta el ángulo y copia o descarga el CSS. Comprueba el resultado antes de copiarlo o descargarlo.

Opciones y límites

Elige dos colores HEX opacos de tres o seis cifras y un ángulo entero de 0 a 360 grados. En CSS, 0 grados apunta hacia arriba, 90 a la derecha y 180 hacia abajo. Los colores se sitúan al 0 y al 100 %; no se añaden paradas intermedias ni transparencia. La vista previa cambia con los controles, mientras que Generar CSS prepara el resultado que puedes copiar o descargar. Se incluye un color de fondo como alternativa y una propiedad background-image con linear-gradient. Pega las declaraciones dentro del selector que corresponda en tu hoja de estilos. El aspecto depende de las proporciones del elemento. El generador no comprueba automáticamente el contraste del texto colocado sobre el degradado.

Guías