CSS Gradient Generator
Create CSS gradients
Create CSS gradients Funziona localmente nel tuo browser
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
About the
Il generatore di gradienti CSS crea un gradiente lineare o radiale reale da due colori e un angolo, lo mostra a grandezza naturale e ti consegna il CSS. L'angolo è la parte che le persone fraintendono: nei CSS, 0deg punta verso l'alto e la direzione ruota in senso orario, quindi 90deg va da sinistra a destra e 180deg va dall'alto verso il basso. Sbagliare è il motivo per cui un gradiente spesso appare capovolto la prima volta. Entrambi i colori possono avere un valore alfa di otto cifre, che è il modo in cui si sfuma una sfumatura su un'immagine eroe.
Where people use the
- Costruire uno sfondo da eroe che sfuma tra due colori del marchio.
- Testare quale angolo sembra corretto prima di impegnarsi nel codice.
- Producendo un sottile gradiente verticale per una carta o un pulsante.
- Creazione di una sovrapposizione semitrasparente che scurisce una fotografia.
How to use the
- 1
Scegli i colori iniziale e finale
Utilizza il selettore colori o digita un valore esadecimale. L'anteprima e il CSS si aggiornano man mano che li modifichi.
- 2
Scegli lineare o radiale
Il tratto lineare attraversa la scatola con l'angolazione scelta. Il radiale si estende verso l'esterno dal centro come un cerchio.
- 3
Imposta l'angolo
Trascina il cursore da 0 a 360 gradi. Ricorda i punti 0° in alto, i punti 90° a destra, i punti 180° in basso, i punti 270° a sinistra.
- 4
Copia il CSS
La regola è una dichiarazione di background che puoi incollare direttamente in un foglio di stile o, se preferisci, in una proprietà dell'immagine di sfondo.
Suggerimenti e migliori pratiche
- Preferisci una piccola differenza di luminanza per gli sfondi che contengono testo; si legge come una trama piuttosto che come una distrazione.
- Per il testo su un gradiente, controlla il contrasto nei punti più chiari e più scuri, non solo nella media.
- Mantieni le pendenze a due o tre fermate; più tende a sembrare fangoso.
Domande frequenti
In che direzione punta l'angolo?
Zero gradi punta verso la parte superiore dell'elemento e l'angolo aumenta in senso orario. Quindi 90° va a destra e 180° va verso il basso. Questo è controintuitivo se sei abituato alla matematica degli angoli misurati in senso antiorario da destra.
Perché la mia sfumatura appare fasciata?
Perché due colori con una luminanza simile producono passaggi visibili su un display a 8 bit, soprattutto su un'area ampia. L'aggiunta di un terzo stop sottile o l'utilizzo di una gamma di luminanza leggermente più ampia di solito lo nasconde.
Posso usare la trasparenza?
SÌ. Utilizza un valore esadecimale a otto cifre come 667eea00 per completamente trasparente o 667eea80 per metà e il gradiente svanirà su tutto ciò che si trova dietro di esso.
Il gradiente è supportato ovunque?
I gradienti lineari e radiali sono supportati in tutti i browser attuali senza prefisso. I prefissi dei fornitori sono necessari solo per versioni molto vecchie di Safari e Android, il che in pratica significa che non sono state create versioni successive al 2015 circa.
Perché il mio gradiente non viene visualizzato?
Perché l'elemento non ha altezza. Un gradiente viene dipinto nel riquadro dell'elemento, quindi un div vuoto si comprime ad altezza zero e non mostra nulla. Imposta un'altezza o aggiungi contenuto.
Genera più di due stop di colore?
No, questo strumento ne gestisce due. Per un gradiente a più fermate, prendi il CSS che produce e aggiungi le fermate manualmente; la sintassi è semplicemente composta da più coppie di colori e percentuali separate da virgole.