Generatore di gradienti CSS
Genera codice CSS per gradienti lineari o radiali personalizzando direzione e colori.
Esegui lo strumento
Questo generatore online crea codice CSS per sfumature lineari o radiali partendo da parametri testuali personalizzabili. Puoi impostare il tipo di gradiente, la direzione desiderata e la sequenza di colori separati da virgole. Se indichi una sfumatura lineare, lo strumento applica direttamente il testo di direzione inserito, come angoli o orientamenti cardinali. Quando inserisci un valore differente, la procedura produce una sfumatura radiale a forma circolare. L'elaborazione suddivide i colori alle virgole, rimuove gli spazi superflui e ricompone la lista formattata. Il modulo propone valori predefiniti per iniziare subito con una combinazione cromatica pronta. Puoi usare codici esadecimali, nomi di colore o valori RGB per ottenere la dichiarazione CSS pronta da incollare nel tuo foglio di stile. Lo strumento accelera la preparazione grafica di sfondi, pulsanti, schede e sezioni del tuo progetto web, mantenendo una sintassi pulita ed essenziale per ogni componente.
Istruzioni
- Scegli il tipo di gradiente inserendo linear per una transizione lineare oppure un altro valore per una forma radiale.
- Specifica la direzione desiderata per il gradiente lineare, ad esempio to right o 45deg.
- Inserisci i colori desiderati separati da virgole, come codici esadecimali o nomi di colore.
- Avvia la generazione per visualizzare la regola CSS risultante.
- Copia il codice generato all'interno delle proprietà di stile del tuo progetto web.
Esempi
- Tipo impostato su linear, direzione 90deg e colori #1e3c72, #2a5298: genera una regola CSS per gradiente lineare orizzontale tra le due tonalità di blu.
- Tipo impostato su radial, direzione lasciata vuota e colori red, yellow, green: genera un gradiente radiale circolare che sfuma dal rosso centrale al verde esterno.
FAQ
Cosa accade se indico un tipo di gradiente diverso da linear?
Se inserisci una dicitura diversa da linear, il generatore crea automaticamente un gradiente radiale con forma circolare.
Come devo separare i singoli colori?
Separa ciascun colore con una virgola. Lo strumento rimuove gli spazi bianchi attorno a ogni valore e inserisce una spaziatura standard nel codice finale.
Lo strumento convalida la correttezza della sintassi dei colori?
Il modulo elabora il testo esattamente come inserito senza effettuare validazioni sintattiche sui nomi o sui valori cromatici.
Posso lasciare vuoti i campi del modulo?
Tutti i campi sono opzionali. Se lasci i campi vuoti, la generazione adotta i parametri predefiniti: sfumatura lineare verso destra con colori #ff7e5f e #feb47b.