Usa el Generador de Degradados CSS gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningun servidor.
Que es de verdad un degradado CSS
Un degradado CSS no es una imagen. Es un fondo que genera el navegador a partir de una lista de colores y posiciones, lo que significa que se mantiene nitido a cualquier tamano, casi no cuesta descarga, y se puede animar o combinar como cualquier otro fondo. Los tres tipos cubren casi todas las necesidades de diseno: los degradados lineales van en una direccion recta, los radiales se extienden desde un punto central, y los conicos giran alrededor de un circulo como un grafico de tarta. Cada uno es un solo valor CSS que puedes poner en una propiedad background.
Los degradados se construyen con paradas de color: un color mas una posicion a lo largo de la linea del degradado. El navegador mezcla suave entre paradas, y donde las colocas controla el aspecto. Dos paradas en 0% y 100% dan una transicion suave. Paradas puestas muy juntas dan una banda marcada. Dos paradas en la misma posicion exacta dan un borde duro, que es como los disenadores dibujan rayas y barras de progreso con CSS puro.
Como usar la herramienta
Elige un tipo de degradado y ajusta las paradas de color. Cada parada tiene un selector de color y un control de posicion: arrastra la posicion para mover donde ese color se alcanza por completo. Anade paradas con el boton cuando necesites una mezcla mas compleja, y quitalas cuando una mas simple se vea mejor. Para degradados lineales, el control de angulo gira la direccion: 90 grados van de izquierda a derecha, 180 grados de arriba abajo, y 0 grados de abajo arriba.
La vista previa se actualiza mientras arrastras, asi que puedes juzgar el resultado en vez de adivinar desde los numeros. Cuando se vea bien, copia la linea CSS y pegala en tu hoja de estilos. El resultado es un valor background normal, asi que funciona en cualquier sitio donde funcione un fondo: botones, tarjetas, cabeceras y secciones principales de pagina completa.
Degradados lineales en la practica
Los degradados lineales son los mas usados. Un degradado sutil de oscuro a transparente sobre una foto hace legible el texto blanco sin una caja solida. Un degradado de marca en un boton le da profundidad con dos colores en vez de una imagen. Los degradados diagonales a 135 grados son una eleccion comun para tarjetas porque el angulo se siente mas dinamico que una transicion vertical recta.
La regla de los angulos confunde a la gente, asi que aqui esta: 0 grados apunta hacia arriba, y los grados crecen en sentido horario. Eso significa que 90 grados apunta a la derecha, no hacia abajo, lo que sorprende a quien espera rumbos de brujula. Si recuerdas “0 es arriba, 90 es derecha”, nunca pondras el angulo al reves.
Degradados radiales y conicos
Los degradados radiales brillan para resplandores y vinetas. Un centro claro que se desvanece a transparente sobre una seccion oscura crea un efecto de foco, y un resplandor radial suave detras de un titular atrae la vista sin ninguna imagen. La forma por defecto es una elipse que llena la caja, y la herramienta usa un circulo, que es la eleccion mas predecible para insignias y focos.
Los degradados conicos son mas nuevos y menos conocidos, pero permiten efectos que los otros tipos no pueden: graficos de tarta, ruedas de color, patrones de cuadros y bordes giratorios. Un degradado conico desde 0 grados gira en sentido horario desde arriba, asi que una parada en 25% queda en el borde derecho. Combinan bien con mascaras para anillos de progreso, donde un degradado conico muestra la parte completada de un circulo.
Paradas de color y bordes duros
El truco mas util con las paradas es el borde duro. Pon dos paradas en la misma posicion con colores distintos, y el degradado salta de un color a otro sin mezcla. Repite ese patron y obtienes rayas: rojo de 0% a 25%, azul de 25% a 50%, y asi. Asi se construyen fondos de rayas, tableros de cuadros y barras de progreso segmentadas con CSS puro, sin imagenes ni elementos extra.
El control del punto medio es el otro truco. La posicion de una parada es donde su color se alcanza por completo, asi que mover una parada central cambia donde ocurre la mezcla. Empuja una parada central hacia un extremo y la mezcla se concentra en una banda estrecha; llevala al centro y la mezcla se reparte de forma uniforme. Los cambios pequenos de posicion suelen importar mas que elegir otro color.
Rendimiento y accesibilidad
Los degradados son baratos de mostrar, pero algunos habitos los mantienen baratos. Prefiere dos o tres paradas en vez de diez, porque cada parada anade trabajo de mezcla que el navegador repite en cada repintado. Evita animar valores de degradado directamente, ya que los navegadores no pueden interpolar suave entre dos definiciones distintas de degradado; anima la opacidad o la posicion de un elemento en capas en su lugar.