Generatore di Gradienti CSS

Cos'è un gradiente CSS?

Un generatore di gradienti CSS è uno strumento visivo che aiuta a costruire transizioni di colore fluide senza dover scrivere la sintassi dei gradienti a mano. In CSS, un gradiente è una transizione progressiva tra due o più colori, renderizzata direttamente dal browser senza alcun file immagine. La specifica CSS Image Module Level 4 definisce le funzioni gradiente come un tipo di valore immagine, il che significa che possono comparire ovunque sia accettato un valore background-image, list-style-image o border-image. Poiché il browser rasterizza i gradienti al momento del rendering, si adattano a qualsiasi risoluzione senza produrre artefatti sfocati su schermi ad alta densità di pixel. Usare un generatore di gradienti CSS risparmia tempo ed elimina le congetture — si regolano i colori e le posizioni visivamente, poi si copia la regola CSS finale.

CSS supporta tre forme di gradiente principali: lineare (lungo una retta), radiale (verso l'esterno da un punto centrale) e conico (una rotazione attorno a un punto centrale). Ogni forma accetta un elenco di punti colore, dove si specificano il colore e, facoltativamente, una posizione (percentuale o lunghezza). Il browser interpola i colori tra i punti usando lo spazio colore sRGB per impostazione predefinita, anche se CSS Color Level 4 consente di specificare altri spazi colore come oklch e lab per transizioni percettivamente più uniformi.

I gradienti sostituiscono gli sfondi basati su immagini per la maggior parte degli scopi decorativi sul web. Una singola regola CSS produce ciò che un tempo richiedeva un'esportazione da Photoshop e una richiesta HTTP. Sono indipendenti dalla risoluzione, non richiedono larghezza di banda aggiuntiva oltre al CSS stesso, e possono essere animati con le proprietà CSS standard. La sintassi dei gradienti è stabile in tutti i principali browser dal 2013 e la forma senza prefissi funziona in Chrome, Firefox, Safari ed Edge senza fallback.

Perché usare questo generatore di gradienti CSS?

Scrivere la sintassi dei gradienti a mano significa indovinare le posizioni dei punti, verificare i valori degli angoli e aggiornare ripetutamente il browser per vedere il risultato. Un costruttore visivo permette di vedere il gradiente mentre lo si costruisce, regolare i punti trascinandoli e copiare il CSS finale quando il risultato è soddisfacente.

Casi d'uso del generatore di gradienti CSS

Riferimento ai tipi di gradiente CSS

CSS definisce cinque funzioni gradiente. I tre tipi principali (linear, radial, conic) hanno ciascuno una variante ripetuta che affianca il pattern. repeating-linear-gradient() e repeating-radial-gradient() sono utili per sfondi a strisce e anelli concentrici. Tutte le funzioni gradiente accettano punti colore in qualsiasi formato CSS: HEX, RGB, HSL, colori con nome o oklch. Il supporto browser per tutte e cinque le funzioni è praticamente universale tra Chrome, Firefox, Safari ed Edge — non sono necessari prefissi vendor.

Gradienti lineari vs radiali vs conici

Ogni tipo di gradiente associa i colori alla geometria in modo diverso. La scelta del tipo giusto dipende dall'effetto visivo desiderato, non da una differenza di qualità tra di loro. Per la maggior parte degli sfondi di pagina e dei divisori di sezione, il gradiente lineare è l'impostazione predefinita corretta — è la più semplice da gestire e la più prevedibile su elementi di dimensioni variabili. I gradienti radiali e conici sono più adatti a effetti visivi specifici in cui la geometria circolare o rotazionale è significativa piuttosto che decorativa.

Esempi di codice

Esempi di generazione e applicazione di gradienti CSS a livello programmatico in JavaScript, Python, CSS e Go. Ognuno produce stringhe di gradiente CSS valide da usare direttamente nei fogli di stile o negli stili inline.

// 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%)"
}

Domande frequenti