Generador de Degradados CSS Gratis

Cómo funciona esta calculadora

Un degradado CSS mezcla dos o más colores a lo largo de una línea, un círculo o una rotación completa, y es la forma más rápida de dar a una página, un banner o una publicación un fondo moderno sin usar un archivo de imagen. Este generador crea el CSS por ti: elige lineal, radial o cónico, coloca los colores en su lugar y copia el código terminado. Todo corre en tu navegador, así que no hay subida de archivos, ni cuenta, ni marca de agua, y el resultado son unas pocas líneas de CSS simple que puedes pegar en cualquier lado.

Los tres tipos cubren trabajos distintos. Los degradados lineales van en una dirección recta, fijada por un ángulo o una de las ocho direcciones rápidas, y son el recurso habitual para encabezados, botones y secciones principales. Los radiales se expanden desde un punto, como círculo o elipse, lo que sirve para brillos, focos de luz y viñetas suaves. Los cónicos giran alrededor de un punto central, que es como se hacen los gráficos circulares, las ruedas de color y los bordes giratorios. Los tres tipos comparten el mismo editor de colores: 2 a 5 colores, cada uno con selector de color, campo HEX exacto y control de posición, más 8 plantillas como atardecer, océano y real cuando quieres un buen resultado en un clic.

Dos detalles hacen que un degradado sirva de verdad y no solo se vea bonito. Primero, la herramienta siempre incluye una línea de color de respaldo con el primer color, así que los navegadores antiguos muestran un color sólido en vez de nada. Segundo, la nota de contraste bajo la vista previa te dice si el texto oscuro o el claro se lee mejor sobre tu degradado, lo que importa en cuanto pones un titular encima. Para usarlo en producción, copia la clase Tailwind en vez del CSS directo, descarga un PNG de 1200 x 630 para imágenes de redes sociales, o toma el SVG independiente cuando necesites el degradado como archivo.