Generador de degradados CSS
Añade dos o más puntos de color para generar al instante código CSS de linear-gradient o radial-gradient con vista previa en vivo. Ajusta el ángulo y las posiciones libremente y copia el código con un clic.
Qué es un degradado CSS
Un degradado CSS es una manera de dibujar una banda o una mancha radial de dos o más colores que se funden entre sí valiéndose solo de una hoja de estilos, sin imagen alguna. linear-gradient() desplaza los colores en línea recta según el ángulo que usted indique; radial-gradient() los extiende desde un centro en círculos. Al escribirse como texto resulta ligero, no se vuelve tosco al ampliarse, y cambiar un color se reduce a editar un valor.
Esta herramienta le permite ajustar el tipo, el ángulo y las paradas de color en pantalla, ver el resultado sobre la marcha y copiar el CSS terminado tal cual. Puede colocar hasta seis paradas, cada una con su color y su posición en tanto por ciento; menos de dos no forman degradado alguno y provocan un aviso. Repare en que el CSS mide el ángulo a su modo: 0deg va de abajo arriba y 90deg de izquierda a derecha, de suerte que el cero apunta a otro lado que en la matemática corriente. El degradado radial no tiene noción de ángulo, así que ese ajuste no le afecta.
Cómo construir un degradado CSS
- Elija el tipo Tome lineal si quiere que los colores se desplacen en línea recta, radial si quiere que se extiendan desde un centro.
- Fije el ángulo Solo rige para el tipo lineal. 0deg va de abajo arriba y 90deg de izquierda a derecha, creciendo en sentido horario. Mueva el deslizador y vea asentarse la dirección.
- Coloque las paradas de color «Añadir un color» le lleva hasta seis. Dé a cada parada un color y una posición en tanto por ciento y controlará con precisión dónde un color cede ante el siguiente.
- Compruebe la vista previa La vista previa se redibuja con cada cambio, de modo que puede juzgar al momento si un límite resulta demasiado brusco o si la dirección es la que quería.
-
Copie el CSS
«Copiar CSS» lo lleva al portapapeles, listo para pegarlo en el
backgroundde su hoja de estilos.
Consejos para aprovecharla mejor
- Puedes añadir hasta 6 puntos de color y ajustar libremente el color y la posición (%) de cada uno para crear degradados complejos con varios colores.
- En un degradado lineal, 0 grados apunta de abajo hacia arriba y 90 grados de izquierda a derecha; usa el control deslizante para ajustarlo de forma intuitiva.
- Los degradados radiales no tienen ángulo: los colores se irradian hacia afuera desde el centro en forma circular.
- Pulsa "Copiar CSS" para copiar el código generado directamente al portapapeles y pegarlo en tu hoja de estilos.
Dónde ayudan los degradados CSS
Dar relieve a un botón o una insignia
Un degradado lineal que oscurece ligeramente de arriba abajo hace que un control parezca más pulsable que un color plano. Mantener pequeña la diferencia entre los colores es lo que lo conserva natural.
Construir un fondo de cabecera
Tienda un degradado de dos o más colores por la ancha banda superior de una página y tendrá un fondo de efecto sin cargar una sola imagen, y sin ralentizarla.
Un efecto de foco
Un degradado radial claro en el centro y oscuro en los bordes se lee como luz que cae sobre la superficie.
Poner texto sobre una fotografía
Superponga un degradado lineal que vaya de negro semitransparente a transparente del todo y el texto seguirá legible incluso sobre las partes claras de la imagen.
Cuando lo que fija son los colores
Al escoger qué poner en cada parada, use el conversor de códigos de color; para pensar en combinaciones, la paleta de colores.
Términos sobre los degradados CSS
- linear-gradient
- La función CSS que dibuja un degradado cuyos colores se desplazan en línea recta según un ángulo dado. Conviene a fondos en banda y al relleno de un botón.
- radial-gradient
- La función CSS que dibuja un degradado que se extiende desde un centro en círculos o elipses. No tiene noción de ángulo.
- Parada de color
- Indicación que sitúa un color concreto en un punto concreto del degradado. La posición se da en tanto por ciento, con el inicio en 0 % y el fin en 100 %.
- Ángulo (deg)
- La dirección en que viajan los colores de un degradado lineal. En CSS, 0deg va de abajo arriba y 90deg de izquierda a derecha, creciendo en sentido horario: el cero apunta a otro lado que en la matemática corriente.
- Prefijo de proveedor
- Un prefijo como
-webkit-, añadido en la época en que cada navegador ofrecía una novedad a su manera antes de la normalización. Los degradados ya están normalizados, de modo que no hace falta prefijo alguno. - La propiedad background
- La propiedad CSS que fija el fondo de un elemento. Un degradado cuenta como una clase de imagen de fondo, y por eso se escribe aquí.
Preguntas frecuentes
A propósito — por qué los degradados CSS reemplazaron a las imágenes
Antes de CSS3, los fondos con degradado en la web solían crearse como imágenes PNG o JPEG hechas en un editor de imágenes. Ese enfoque tenía inconvenientes reales: peticiones adicionales que ralentizaban la carga de la página, resultados borrosos al estirar la imagen en diseños responsivos, y la necesidad de reexportar toda la imagen solo para ajustar un color.
Cuando los navegadores implementaron la sintaxis de linear-gradient y radial-gradient a principios de la década de 2010, esos problemas prácticamente desaparecieron. Al describirse por completo en texto, los degradados son ligeros, se mantienen nítidos a cualquier tamaño y pueden recolorearse editando solo unos valores en la hoja de estilos.
Las primeras implementaciones requerían distintos prefijos de proveedor (-webkit-, -moz-, -o-, etc.) y una sintaxis ligeramente distinta según el navegador, por lo que había que escribir varias versiones con prefijo de la misma regla. Ahora que el W3C ha estandarizado la sintaxis, la versión sin prefijo funciona de forma consistente en todos los navegadores principales.