Command Palette

Search for a command to run...

GE

Generatore di gradiente CSS

Crea bellissimi gradienti CSS con l'anteprima dal vivo

Che cos'è il generatore di gradiente CSS?

CSS Gradient Generator è uno strumento online gratuito che ti consente di creare bellissimi gradienti CSS con un'interfaccia visiva e un'anteprima dal vivo. Supporta tipi di sfumature lineari, radiali e coniche, consentendo di progettare transizioni cromatiche straordinarie per sfondi, pulsanti, schede e altri elementi dell'interfaccia utente.

Lo strumento fornisce un'interfaccia intuitiva per trascinare e rilasciare per aggiungere e posizionare interruzioni del colore, regolare la direzione e l'angolo del gradiente e l'opacità di regolazione fine. Puoi vedere esattamente come apparirà il tuo gradiente in tempo reale, rendendo facile sperimentare combinazioni di colori diverse fino a ottenere il risultato perfetto.

Una volta che sei soddisfatto del tuo gradiente, copia semplicemente il codice CSS generato e incollalo nel tuo foglio di stile. Lo strumento emette CSS puliti e compatibili con il browser cross-browser che funziona in tutti i browser moderni. Non è necessaria alcuna competenza di progettazione o codifica per creare sfumature dall'aspetto professionale.

Una cosa da sapere su come i browser disegnano i gradienti: i colori sono interpolati in sRGB, che non è percettivamente uniforme. La miscelazione di due colori fortemente opposti, dal blu al giallo è il caso classico, porta il punto medio attraverso un grigio desaturato che nessuno dei due colori finali suggerisce. Le solite correzioni sono aggiungere un arresto nel mezzo per orientare il percorso o per individuare i colori finali più vicini tra loro sulla ruota. Ripetere un arresto nella stessa posizione produce un bordo duro anziché una miscela, che è il modo in cui vengono costruiti gli effetti di striscia e banda. I prefissi del fornitore non sono più necessari per i gradienti standard in nessun browser che ancora riceve aggiornamenti, quindi anche l'output più breve è il più compatibile. I gradienti sono dipinti come sfondi, quindi hanno bisogno di una scatola con dimensioni per essere visibili.

Come utilizzare il generatore di gradiente CSS?

  1. Scegli il tipo di sfumatura

    Seleziona tra i tipi di gradiente lineare, radiale o conico. Ogni tipo crea un diverso tipo di effetto di transizione colore.

  2. Aggiungi fermate colore

    Fare clic per aggiungere interruzioni di colore e scegliere i colori per ogni fermata. Trascinali per regolare la loro posizione lungo il gradiente.

  3. Regolare la direzione e l'angolo

    Impostare la direzione o l'angolo del gradiente per i gradienti lineari o la posizione centrale per i gradienti radiali per controllare il flusso dei colori.

  4. Copia il codice CSS

    Copia il codice CSS generato con un clic e incollalo direttamente nel tuo foglio di stile. Il codice è pronto per l'uso in qualsiasi progetto web.

Caratteristiche principali

  • Classe e uscita in linea

    Il gradiente viene emesso sia come regola CSS che come dichiarazione di sfondo nudo per uno stile in linea, ciascuno con il proprio pulsante di copia

  • Tipi di gradiente multipli

    Crea gradienti lineari, radiali e conici con controllo completo su direzione, angolo e forma

  • Anteprima visiva dal vivo

    Guarda il tuo aggiornamento del gradiente in tempo reale mentre regoli colori, stop e direzioni

  • Copia CSS con un clic

    Copia codice CSS pulito e cross-browser pronto da incollare nei tuoi fogli di stile

Frequently Asked Questions

Impostare la proprietà di sfondo su una funzione sfumatura: Sfondo: lineare-gradiente (90 gradi, #FF0000, #0000FF). Il primo valore è la direzione (un angolo come 90 gradi, o una parola chiave come "a destra"), e tutto dopo di essa è un elenco di interruzioni del colore. Costruisci visivamente il gradiente qui e copia la dichiarazione finita direttamente nel tuo foglio di stile.

Comments

0 comments

0/2000 characters

No comments yet. Be the first to share your thoughts!

cssgradientlinearradialconiccolorbackgroundgenerator