Generador de degradados CSS gratis

Usa una función de degradado como fondo, por ejemplo background: linear-gradient(90deg, #ff6b6b 0%, #feca57 100%). Aquí eliges el tipo, el ángulo y los puntos, y la herramienta escribe esa línea para que la copies en tu hoja de estilos.

90deg va de izquierda a derecha. 0deg va de abajo hacia arriba, 180deg de arriba hacia abajo y 270deg de derecha a izquierda. El valor predeterminado aquí es 135deg, de arriba a la izquierda hacia abajo a la derecha. Puedes escribir cualquier número, incluso valores negativos.

Escribe un color transparente en el cuadro de texto de un punto, como rgba(255,255,255,0) para desvanecer a blanco transparente o rgba(0,0,0,0) para negro transparente. El código lo conserva tal como lo escribiste. El selector de color no puede mostrar transparencia y muestra negro en su lugar.

El lineal mezcla los colores a lo largo de una línea recta con un ángulo. El radial los extiende desde un punto central. El cónico los barre alrededor de un centro como la manecilla de un reloj, ideal para gráficos circulares y ruedas de color. Esta herramienta dibuja los degradados radiales como un círculo centrado.

Todavía no en la herramienta, ya que la salida radial siempre es radial-gradient(circle, ...) desde el centro. Después de copiar, edita el código: cambia circle por ellipse, o escribe circle at 30% 20% para mover el centro. Los puntos de color se mantienen igual.

No. Todos los navegadores actuales admiten degradados lineales y radiales sin prefijo, y los degradados cónicos funcionan en Chrome 69, Safari 12.1, Firefox 83 y versiones posteriores. Esta herramienta nunca añade prefijos, así que la línea que copias usa solo la sintaxis estándar.

Coloca dos puntos en la misma posición. Por ejemplo, #000000 al 50% y #ffffff al 50% generan una línea nítida en lugar de una mezcla. Agrega más pares para crear rayas. El código ordena los puntos por posición, y los que están en el mismo lugar conservan el orden en que los agregaste.

No hay límite. Agregar punto coloca uno nuevo a medio camino entre el primer punto y el último que añadiste, así que arrastra cada punto nuevo hasta donde quieras. Puedes quitar puntos hasta que queden dos.

La herramienta genera CSS puro, no clases de Tailwind. Pega el degradado en un valor arbitrario con guiones bajos en lugar de espacios, como bg-[linear-gradient(135deg,#6366f1_0%,#8b5cf6_100%)], o agrégalo a tu tema como imagen de fondo.

Esta herramienta crea degradados de fondo, pero puedes reutilizar el código para texto. Pon la línea de background que copiaste en el elemento de texto y añade background-clip: text, -webkit-background-clip: text y color: transparent para que el degradado se vea a través de las letras.

Sí. Es gratis, sin cuenta ni límite de uso. Tus colores y ajustes se quedan en tu navegador y no se guardan, así que al recargar empiezas de cero. En el sitio en línea, Google Analytics cuenta los clics en Copiar CSS, nunca el degradado en sí.