Vai al contenuto
OneKitly

Generatore di gradienti CSS

Crea un gradiente CSS lineare o radiale da due colori e un angolo, con output CSS e Tailwind.

Apri Generatore di gradienti CSS e ottieni subito una risposta, senza creare un account. Il suo posto è sotto Colori e CSS; Verificatore di contrasto dei colori e Invertitore di colore rispondono alle domande più vicine.

Come si usa

  1. Apri lo strumento — senza registrazione né installazione.
  2. Inserisci i tuoi dati o regola le opzioni disponibili.
  3. Ottieni il risultato all'istante, poi copialo o scaricalo.

Domande frequenti

Che cos'è Generatore di gradienti CSS?

Crea un gradiente CSS lineare o radiale da due colori e un angolo, con output CSS e Tailwind.

In quali casi si usa davvero?

Portare un colore da uno strumento di design a un foglio di stile, costruire una palette attorno a un colore di marca e verificare che il testo vi resti leggibile.

Qual è l'errore più comune?

Giudicare il contrasto a occhio. Due colori che sembrano distinti su un monitor luminoso possono fallire nettamente il rapporto di accessibilità, ed è quel rapporto che un audit misurerà.

Esiste uno strumento per il passo successivo?

Invertitore di colore è il più vicino dopo questo: Inverti un colore (255 − RGB) o prendi il complementare, in HEX/RGB/HSL/CMYK con il contrasto.

Cos'altro conviene tenere aperto accanto?

Generatore di schemi di colore e Compressore CSS: ricorrono nella stessa attività abbastanza spesso da meritare una seconda scheda.

Da dove vengono i dati?

Le conversioni tra HEX, RGB e HSL sono esatte. Il contrasto segue la formula di luminanza relativa WCAG 2; il CMYK dipende dal dispositivo, quindi un valore a schermo è un'approssimazione della stampa.

Per approfondire

Tutte le guide
SpiegazioneGradienti, banding e perché il centro sembra spentoInterpolare in sRGB fa la media di numeri codificati in gamma: il punto medio da rosso a verde è #808000 quando la risposta a mezza luce è #bcbc00 — il 57,2 % di luce in meno. Il banding è un problema aritmetico distinto: 8 bit danno 256 gradini, e un gradiente scuro può averne solo 28. Ecco entrambi, calcolati.SpiegazioneGli schemi di colore sono geometria su una ruota — e la ruota è sbagliataComplementare, triade, analogo e complementare diviso sono solo rotazioni: aggiungi 180°, 120°, 30° o 150° a una tinta. L'aritmetica è banale. Il problema è che il cerchio delle tinte HSL non è percettivamente uniforme — giallo e blu alla stessa luminosità HSL differiscono di 12,85 volte in luminanza — quindi una tavolozza generata va poi verificata nel contrasto.SpiegazioneRapporto di contrasto: come lo calcola davvero la WCAGIl rapporto WCAG è (L1 + 0,05) ÷ (L2 + 0,05), e L è la luminanza relativa, non la luminosità. Il verde ne porta il 71,52 % e il blu il 7,22 %, ecco perché il blu puro su bianco passa a 8,59:1 mentre il grigio medio fallisce a 3,95:1. Ecco l'intero calcolo, eseguito dall'inizio alla fine.TutorialHEX vs RGB: leggere e convertire i coloriHEX e RGB sono due notazioni per gli stessi colori. Ecco come leggere ciascuna, convertire tra loro e aggiungere trasparenza.GuidaChe cosa può togliere un minificatore e che cosa non deve toccareLa minificazione deve preservare il significato, e la parte interessante è lo spazio bianco che porta significato: il combinatore discendente, gli spazi dentro calc(), lo stacco fra due elementi inline. Misurato qui su file reali, compreso ciò che brotli ti avrebbe risparmiato comunque.SpiegazioneCome funzionano davvero i font di Instagram (non sono font)Nulla viene formattato. Ogni lettera è sostituita da un diverso carattere Unicode che sembra grassetto o corsivo, ed è per questo che uno screen reader legge un guazzabuglio e alcuni dispositivi mostrano quadratini vuoti.