Generador de degradados
Funciona por completo en tu navegador. Tus archivos y datos nunca salen de tu dispositivo.
Acerca de esta herramienta
Un generador de degradados te permite construir un degradado CSS a ojo, en lugar de adivinar ángulos y posiciones de los puntos de color. Elige entre lineal, radial o cónico, añade o quita puntos de color, y ajusta el color y la posición de cada uno mientras una gran caja de vista previa se actualiza al instante.
¿Qué diferencia hay entre los tres tipos de degradado?
Un degradado lineal mezcla colores a lo largo de una línea recta, y controlas su dirección con un control deslizante de ángulo: 90 grados va de izquierda a derecha, 180 de arriba a abajo. Un degradado radial se extiende hacia fuera desde un punto central, y aquí eliges entre círculo (se expande igual en todas direcciones) o elipse (se ajusta a la forma de la caja). Un degradado cónico reparte los colores alrededor de un punto central, como una rueda de colores o un gráfico circular, y también toma un ángulo para fijar dónde empieza el barrido. Cada tipo acepta cualquier cantidad de puntos de color, y cada punto tiene un color y una posición entre 0 y 100 por ciento, así que puedes agrupar varios colores muy juntos o repartirlos de forma pareja.
¿Puedo partir de un resultado ya hecho en vez de empezar de cero?
Sí. La herramienta trae un pequeño conjunto de preajustes, como un degradado lineal cálido de dos colores llamado “Sunset”, una mezcla radial “Deep Space” y un degradado cónico completo “Rainbow Wheel”. Al elegir uno se carga en el editor para que ajustes los colores, los puntos o el ángulo a partir de ahí en lugar de empezar en blanco. Sea cual sea el resultado, la línea que obtienes es el CSS exacto que escribirías a mano, como linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%), listo para pegar en una hoja de estilos.
¿Se sube a algún sitio lo que diseño?
No. Construir y previsualizar el degradado ocurre por completo en tu navegador, así que nada de lo que diseñas sale de tu máquina. Eso permite prototipar sin problema el degradado de marca de un cliente o el fondo de un producto interno antes de publicarlo en cualquier sitio.
Úsalo para obtener la línea background: linear-gradient(...) de una sección hero, un resplandor radial detrás de una tarjeta, o un degradado cónico para un anillo de progreso o una rueda de colores. Consulta la referencia de gradient de MDN para la sintaxis completa de linear-gradient(), radial-gradient() y conic-gradient().