Generatore di gradienti CSS
Genera codice CSS per gradienti in anteprima selezionando colori e angoli
Caratteristiche
Anteprima e codice si aggiornano insieme
L'aspetto e il CSS cambiano contemporaneamente quando modifichi colori e angoli
Supporta gradienti lineari, radiali e conici
Specifica nel dettaglio angolo, forma e posizione centrale per ogni tipo
Regola fino a 10 colori trascinando
Regola la posizione dei colori trascinando sulla barra, la trasparenza con il cursore
8 campioni predefiniti e generazione casuale
Inizia da combinazioni di colori standard o casuali e ritocca i dettagli
Come usarlo
Seleziona il tipo
Scegli il tipo di gradiente tra lineare, radiale e conico
Decidi i colori
Seleziona i colori dal codice o dai campioni, aggiungi colori con 'Aggiungi colore' e regola posizione e trasparenza
Regola l'orientamento
Per i gradienti lineari specifica angolo o direzione, per radiali e conici specifica la posizione centrale
Copia il codice
Copia il CSS in una riga con il pulsante 'Copia' e incollalo nei tuoi stili
Casi d'uso
Creazione di sfondi per immagini hero
Scegli il colore di sfondo per l'intestazione o i pulsanti del sito senza scrivere codice
Scelta dei colori per i titoli del blog
Scegli una combinazione di colori simile ai campioni per gli sfondi dei titoli degli articoli
Sovrapposizioni per foto
Crea uno strato traslucido abbassando l'opacità e sovrapponendo i colori alle foto
Regolazione di gradienti multicolore
Trascina gradualmente le posizioni dei confini tra 3 o più colori
Nozioni di base
Differenze tra linear, radial e conic
I gradienti CSS hanno 3 funzioni diverse che cambiano il modo in cui i colori si trasformano, tutte utilizzate nella proprietà background.
- linear-gradient：linear-gradient è un gradiente lineare in cui i colori cambiano lungo una retta con l'angolo specificato.
- radial-gradient：radial-gradient è un gradiente radiale in cui i colori si espandono dalla posizione centrale verso l'esterno in forma circolare o ellittica.
- conic-gradient：conic-gradient è un gradiente conico in cui i colori cambiano ruotando intorno alla posizione centrale in senso orario.
Corrispondenza tra angoli e parole chiave di direzione
L'angolo di linear-gradient inizia con 0deg verso l'alto e aumenta in senso orario. Puoi anche usare parole chiave di direzione come 'to right': 90deg corrisponde a 'to right' e 180deg a 'to bottom'.
Come scrivere stop di colore e trasparenza
Uno stop di colore (color stop) è la posizione nel gradiente dove appare quel colore: 0% è il punto iniziale e 100% è il punto finale. Ad esempio, '#3B82F6 0%, #8B5CF6 100%' rappresenta una transizione dal blu iniziale al viola finale.
- Formato #RRGGBB：Il formato #RRGGBB rappresenta i colori come numeri esadecimali a 2 cifre per rosso, verde e blu. Ad esempio, #FF0000 rappresenta il rosso opaco.
- Formato rgba：Il formato rgba aggiunge la trasparenza (0-1) ai valori di rosso, verde e blu (0-255). Una trasparenza di 0,5 rappresenta un colore semitrasparente.
Sicurezza e privacy
Elaborazione nel browser
I dati inseriti vengono elaborati solo all'interno del tuo browser e non vengono inviati all'esterno.
Elaborazione solo nel browser
Generazione del codice del gradiente viene elaborato interamente nel tuo browser e i dati di input non vengono inviati ai server.
Comunicazione crittografata con HTTPS
Il caricamento della pagina è crittografato con TLS e il contenuto non può essere letto da terze parti.
Nessun invio a terze parti
I dati di input non vengono inviati a servizi esterni come reti pubblicitarie o tracker.
Nessun salvataggio automatico dei risultati
Colori e impostazioni scelti e i suggerimenti di input non vengono archiviati sui server.
Segui RAKKOTOOLS nella ricerca Google
185 strumenti utili, più facili da trovare dalla ricerca Google e dalla ricerca AI!
- Trovabili nella ricerca
- Mostrato anche nella ricerca AI
- Scopri nuovi strumenti
Informazioni sugli aggiornamenti
- update #312
Aggiunto generatore di gradienti CSS, genera codice selezionando colore e angolo