Generatore di Gradienti CSS
Disegna gradienti lineari accattivanti e copia direttamente il codice CSS per il tuo sito web.
CSS Output
background: linear-gradient(90deg, #4F46E5 0%, #EC4899 100%);Preview
Comprendere i gradienti CSS
I gradienti permettono di creare transizioni armoniose tra più colori. In CSS vengono gestiti come valori background-image, consentendo sovrapposizioni e profondità visiva avanzata.
Gradienti lineari (Linear Gradients)
La sintassi combina un angolo di inclinazione con una sequenza ordinata di stop cromatici. Sperimenta con il cursore dell'angolo per osservare il comportamento dinamico della luce.
Knowledge Base & FAQ
Domande Frequenti (FAQ)
Risposte dirette e soluzioni a dubbi comuni, sfide tecniche e standard di settore.
Perché i gradienti CSS a volte appaiono grigiastri o spenti al centro?expand_more
Questo fenomeno è noto come la 'zona morta grigia'. Quando il CSS interpola due colori saturi nello spazio colore standard sRGB, il punto mediano matematico attraversa tonalità a bassa saturazione. Soluzioni:
- Aggiungere un colore intermedio armonico (es. verde tra blu e giallo).
- Oppure utilizzare la specifica moderna CSS Color 4 in OKLCH:
background: linear-gradient(in oklch to right, blue, yellow);che mantiene la luminosità naturale.
Come animare uno sfondo con gradiente CSS al passaggio del mouse (hover)?expand_more
Poiché i browser non possono animare direttamente la proprietà
background-image, la tecnica ideale consiste nell'ingrandire la dimensione dello sfondo e animare background-position: .gradient-btn {
background: linear-gradient(135deg, #4F46E5, #EC4899);
background-size: 200% 200%;
transition: background-position 0.4s ease;
}
.gradient-btn:hover {
background-position: 100% 100%;
}Qual è la differenza tra linear-gradient e radial-gradient in CSS?expand_more
linear-gradient() distribuisce i colori lungo una retta orientata da un angolo (es.
90deg) o da una direzione (to bottom right). radial-gradient() si irradia da un punto centrale verso l'esterno in cerchi o ellissi concentriche, ideale per effetti di riflettore e illuminazione ambientale.Come si realizza l'effetto glassmorphism moderno con i gradienti CSS?expand_more
Il glassmorphism combina sfondi gradienti semitrasparenti in formato RGBA con una sfocatura accelerata via GPU:
.glass-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
}I gradienti CSS complessi incidono sulle prestazioni della batteria degli smartphone?expand_more
No. A differenza delle immagini bitmap pesanti (PNG/WebP), i gradienti CSS sono formule matematiche vettoriali calcolate direttamente dalla GPU. Non consumano traffico di rete e richiedono un impiego minimo di memoria.