Vai al contenuto
ToolsMinify logo
Strumenti generatore

Generatore gradienti CSS

Crea gradienti CSS per sfondi, pulsanti e sezioni hero senza uscire dal browser.

Informazioni su Generatore gradienti CSS

Crea gradienti CSS per sfondi, pulsanti e sezioni hero senza uscire dal browser. Passa tra tipi linear, radial e conic, imposta angolo o posizione, aggiungi fino a otto color stop e copia una dichiarazione `background:` pronta o solo il valore gradiente. Abbinalo al Convertitore HEX in RGB per colori stop o al Minificatore CSS prima del deploy. Nulla viene caricato.

Come usare Generatore gradienti CSS

  1. Scegli linear, radial o conic.
  2. Imposta angolo (linear / conic) o forma e posizione (radial / conic).
  3. Modifica color stop - hex e % opzionale - o aggiungi altri stop.
  4. Copia il CSS background o il valore gradiente nel foglio di stile. Tutto resta sul dispositivo.

Esempi di Generatore gradienti CSS

Lavaggio brand diagonale

linear-gradient(135deg, #3b82f6 0%, #ec4899 100%) - sfondo hero o card comune.

Spotlight radiale morbido

radial-gradient(circle at center, #ffffff 0%, #e2e8f0 100%) per vignette morbida o backdrop modale.

Ruota colori conica

conic-gradient(from 0deg at center, #ff0000 0%, #00ff00 50%, #0000ff 100%) per grafici e anelli decorativi.

Sfumatura lineare a tre stop

Aggiungi uno stop centrale (es. #22c55e al 50%) tra due colori brand per un blend piu ricco.

Casi d'uso comuni

  • Progettare sfondi hero e sezione in CSS
  • Creare riempimenti pulsante e badge con gradienti multi-stop
  • Prototipare spotlight radiali e vignette morbide
  • Creare grafici conici o anelli decorativi
  • Copiare dichiarazioni background pronte per produzione

Domande frequenti su Generatore gradienti CSS

Quali tipi gradiente CSS supporta questo strumento?
Linear, radial e conic. Linear usa un angolo in gradi. Radial sceglie circle o ellipse piu posizione. Conic usa from-angle e posizione.
Come funzionano i color stop?
Ogni stop e un colore hex piu posizione opzionale da 0% a 100%. Lascia vuota la posizione per spaziatura uniforme del browser. Servono almeno due colori validi.
Copio la regola background completa o solo il gradiente?
Usa Copy background per `background: linear-gradient(...);` pronto da incollare. Usa Copy value quando ti serve solo la funzione, ad esempio dentro `background-image` o una custom property.
Posso usare trasparente o hex a 8 cifre?
Si. Inserisci #rrggbbaa (o scegli un colore solido e modifica l'hex). Valori hex non validi sono saltati finche non li correggi.
I miei input lasciano il dispositivo?
No. Il Generatore gradienti CSS gira interamente nel browser. Colori e impostazioni non vengono caricati ne archiviati su un server.

Strumenti correlati

Generatore di palette colori

Generatore di palette colori gratuito nel browser. Crea palette complementari, analoghe, triadiche, tetradiche, split-complementari, monocromatiche o casuali. Copia HEX, RGB, HSL o variabili CSS.

Convertitore HEX in RGB

Converti HEX in RGB (e viceversa) con HSL, CMYK, rampa tinte-ombre, card contrasto WCAG e snippet token CSS - convertitore codici colore gratuito.

Convertitore RGB in HSL

Converti RGB in HSL e HSL in RGB all'istante. Convertitore colore online gratuito con swatch live e CSS rgb() e hsl() pronti da copiare.

Convertitore PX in REM

Converti px in rem ed em online con dimensione font base configurabile. Convertitore px in rem gratuito con tabella di riferimento rapida. Gira nel browser.

Minificatore CSS

Minificatore CSS online gratuito. Comprimi CSS rimuovendo commenti e collassando spazi bianchi - fogli di stile piu piccoli, caricamento piu veloce. Nel browser, nessun upload.