Generatore di Gradienti

Crei un gradiente lineare, radiale o conico, aggiunga punti di colore, imposti la direzione e copi il codice CSS con un solo clic.

Tipo di gradiente
Punti di colore
CSS
Regoli i punti di colore e la direzione per creare il gradiente.

Ogni gradiente viene renderizzato direttamente nel Suo browser. Nessun dato impostato viene caricato su BroBroGo.

FAQ

Qual è la differenza tra gradienti lineari, radiali e conici?

Un gradiente lineare sfuma i colori lungo una linea retta orientata secondo un angolo. Un gradiente radiale li diffonde verso l'esterno a partire dal centro, in forma circolare o ellittica. Un gradiente conico ruota i colori attorno al centro, come in una ruota cromatica.

Cosa sono i punti di colore (color stops)?

Ogni punto di colore (color stop) è un colore associato a una specifica posizione lungo il gradiente (0% all'inizio, 100% alla fine). Sposti un punto per variare la transizione del colore o ne aggiunga altri per creare sfumature più ricche. Può utilizzarne fino a otto.

Come posso controllare la direzione?

Per i gradienti lineari o conici, il cursore dell'angolo definisce la direzione: 0° punta verso l'alto, 90° verso destra. I gradienti radiali non hanno un angolo; scelga invece una forma circolare o ellittica per modificarne la diffusione.

Generatore CSS Cubic BezierTrascini le due maniglie per modellare una curva di easing, osservi il movimento in tempo reale e copi il valore cubic-bezier() risultante.Generatore di Box ShadowTrascini i cursori per definire un'ombra box-shadow, sovrapponga i livelli per dare profondità e copi il codice CSS istantaneamente.Generatore di Border RadiusArrotondi ogni angolo con i cursori, crei forme organiche con la modalità ellittica e copi il codice CSS all'istante.Generatore di FlexboxConfiguri un contenitore flex e i relativi elementi con controlli visivi, osservi la risposta del layout in tempo reale e copi il codice CSS con un clic.Generatore di CSS GridDefinisca colonne e righe, trascini il mouse sulle celle per posizionare gli elementi e copi il codice CSS e HTML corrispondente con un solo clic.Calcolatore CSS clamp()Inserisca una dimensione per schermi piccoli e grandi e ottenga un valore clamp() fluido che si adatta perfettamente: ideale per font, padding, margini o gap.Convertitore di ColoreConverta i colori tra HEX, RGB, HSL, HSV, CMYK e LAB: modifichi un campo e gli altri si aggiorneranno di conseguenza.Formattatore e minimizzatore CSSRiorganizza i rientri del CSS disordinato per leggerlo facilmente o minimizzalo per la pubblicazione, con una modalità sicura che non altera l'ordine delle regole.Verifica ContrastoInserisca un colore per il testo e uno per lo sfondo per calcolare il rapporto di contrasto WCAG e verificare il superamento dei livelli AA e AAA.