Generador de Gradientes CSS

¿Qué es un gradiente CSS?

Un generador de gradientes CSS es una herramienta visual que te ayuda a crear transiciones de color suaves sin escribir la sintaxis de gradiente a mano. En CSS, un gradiente es una transición suave entre dos o más colores, renderizada directamente por el navegador sin ningún archivo de imagen. La especificación CSS Image Module Level 4 define las funciones de gradiente como un tipo de valor de imagen, lo que significa que pueden aparecer en cualquier lugar donde se acepte un valor de background-image, list-style-image o border-image. Dado que el navegador rasteriza los gradientes en tiempo de renderizado, se escalan a cualquier resolución y nunca producen artefactos borrosos en pantallas de alta densidad. Usar un generador de gradientes CSS ahorra tiempo y elimina las conjeturas — ajustas colores y posiciones visualmente y luego copias la regla CSS terminada.

CSS admite tres formas principales de gradiente: lineal (a lo largo de una línea recta), radial (hacia afuera desde un punto central) y cónico (un barrido alrededor de un punto central). Cada forma acepta una lista de puntos de color, donde especificas el color y opcionalmente una posición (porcentaje o longitud). El navegador interpola los colores entre puntos usando el espacio de color sRGB por defecto, aunque CSS Color Level 4 permite especificar otros espacios de color como oklch y lab para transiciones perceptualmente más suaves.

Los gradientes reemplazan los fondos basados en imágenes para la mayoría de los propósitos decorativos en la web. Una sola regla CSS produce lo que antes requería una exportación de Photoshop y una petición HTTP. Son independientes de la resolución, no requieren ancho de banda de red más allá del propio CSS y pueden animarse o transicionarse con propiedades CSS estándar. La sintaxis de gradiente ha sido estable en todos los principales navegadores desde 2013, y la forma sin prefijos funciona en Chrome, Firefox, Safari y Edge sin necesidad de alternativas.

¿Por qué usar este generador de gradientes CSS?

Escribir la sintaxis de gradiente a mano implica adivinar las posiciones de los puntos, verificar los valores de ángulo y actualizar el navegador repetidamente para ver el resultado. Un constructor visual te permite ver el gradiente mientras lo creas, ajustar los puntos arrastrándolos y copiar el CSS final cuando tiene el aspecto correcto.

Casos de uso del generador de gradientes CSS

Referencia de tipos de gradiente CSS

CSS define cinco funciones de gradiente. Los tres tipos principales (linear, radial, conic) tienen cada uno una variante repetitiva que reproduce el patrón en mosaico. repeating-linear-gradient() y repeating-radial-gradient() son útiles para fondos rayados y anillos concéntricos. Todas las funciones de gradiente aceptan puntos de color en cualquier formato de color CSS: HEX, RGB, HSL, colores con nombre u oklch. La compatibilidad con las cinco funciones es prácticamente universal en Chrome, Firefox, Safari y Edge — no se necesitan prefijos de proveedor.

Gradientes lineales vs radiales vs cónicos

Cada tipo de gradiente asigna colores a la geometría de forma diferente. Elegir el tipo correcto depende del efecto visual que necesitas, no de una diferencia de calidad entre ellos. Para la mayoría de los fondos de página y divisores de sección, un gradiente lineal es la opción predeterminada correcta — es el más sencillo de entender y el más predecible en elementos de distintos tamaños. Los gradientes radiales y cónicos son más adecuados para efectos visuales específicos donde la geometría circular o rotacional tiene sentido más allá de lo meramente decorativo.

Ejemplos de código

Ejemplos de generación y aplicación de gradientes CSS de forma programática en JavaScript, Python, CSS y Go. Cada uno produce cadenas de gradiente CSS válidas que puedes usar directamente en hojas de estilos o estilos en línea.

// Generate a CSS linear-gradient string from an array of stops
function buildGradient(angle, stops) {
  const parts = stops.map(s => `${s.color} ${s.position}%`)
  return `linear-gradient(${angle}deg, ${parts.join(', ')})`
}

const stops = [
  { color: '#6366f1', position: 0 },
  { color: '#ec4899', position: 50 },
  { color: '#f59e0b', position: 100 },
]
buildGradient(90, stops)
// -> "linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"

// Apply to an element
document.querySelector('.hero').style.background = buildGradient(135, stops)

# Generate a CSS gradient string for use in templates or SVGs
def build_gradient(angle: int, stops: list[tuple[str, int]]) -> str:
    parts = [f"{color} {pos}%" for color, pos in stops]
    return f"linear-gradient({angle}deg, {', '.join(parts)})"

stops = [("#6366f1", 0), ("#ec4899", 50), ("#f59e0b", 100)]
print(build_gradient(135, stops))
# -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"

# Interpolate N colors between two endpoints
def interpolate_hex(c1: str, c2: str, steps: int) -> list[str]:
    r1, g1, b1 = int(c1[1:3], 16), int(c1[3:5], 16), int(c1[5:7], 16)
    r2, g2, b2 = int(c2[1:3], 16), int(c2[3:5], 16), int(c2[5:7], 16)
    return [
        f"#{int(r1+(r2-r1)*i/(steps-1)):02x}"
        f"{int(g1+(g2-g1)*i/(steps-1)):02x}"
        f"{int(b1+(b2-b1)*i/(steps-1)):02x}"
        for i in range(steps)
    ]

interpolate_hex("#6366f1", "#f59e0b", 4)
# -> ['#6366f1', '#9a7399', '#d18042', '#f59e0b']

/* Linear gradient — left to right */
.hero {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);
}

/* Radial gradient — circular spotlight */
.badge {
  background: radial-gradient(circle at 30% 30%, #6366f1, #312e81);
}

/* Conic gradient — color wheel */
.wheel {
  background: conic-gradient(from 0deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6, #ef4444);
  border-radius: 50%;
}

/* Multi-stop with transparency */
.overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0.9) 100%
  );
}

/* Repeating stripes */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #6366f1 0 10px,
    transparent 10px 20px
  );
}

package main

import "fmt"

// Stop represents one color stop in a gradient.
type Stop struct {
	Color    string
	Position int // percent 0-100
}

func buildGradient(angle int, stops []Stop) string {
	result := fmt.Sprintf("linear-gradient(%ddeg", angle)
	for _, s := range stops {
		result += fmt.Sprintf(", %s %d%%", s.Color, s.Position)
	}
	return result + ")"
}

func main() {
	stops := []Stop{
		{"#6366f1", 0},
		{"#ec4899", 50},
		{"#f59e0b", 100},
	}
	fmt.Println(buildGradient(135, stops))
	// -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"
}

Preguntas frecuentes