TF

Design e CSS

Generatore CSS: gradienti, ombre, vetro, easing e blob

Crea visivamente gradienti CSS, ombre a più livelli, card glassmorphism, curve cubic-bezier e blob SVG.

Crea gradienti lineari, radiali o conici con tutte le tappe di colore che vuoi.

Tappe di colore
CSS
background: #0f766e;
background: linear-gradient(135deg, #0f766e 0%, #6366f1 100%);

Preimpostazioni

Che cos’è questo strumento?

Cinque generatori di design in un unico posto. Crea gradienti lineari, radiali e conici; sovrapponi ombre morbide o nette; progetta card in vetro smerigliato; trascina una curva cubic-bezier e guardala animarsi, oppure genera blob SVG organici. Ogni modifica aggiorna subito anteprima e CSS.

I gradienti supportano qualsiasi numero di tappe di colore e varianti ripetute, e includono un colore pieno di riserva. Le ombre possono avere fino a sei livelli: unire un’ombra piccola e netta a una grande e morbida è il segreto di una profondità realistica.

Il glassmorphism usa backdrop-filter per sfocare ciò che sta dietro una card traslucida e funziona in tutti i browser moderni. L’editor di easing produce una funzione cubic-bezier(), e i valori Y fuori da 0–1 creano un effetto di rimbalzo. I blob sono tracciati chiusi e morbidi, utilizzabili come SVG o clip-path CSS.

Come usare Generatore CSS

  1. Scegli un generatore: Gradiente, Ombra, Glassmorphism, Curva di Bézier o Blob SVG.
  2. Regola cursori e colori, oppure parti da una preimpostazione.
  3. L’anteprima si aggiorna dal vivo a ogni modifica.
  4. Copia il CSS generato (o scarica l’SVG) e incollalo nel tuo progetto.

Esempi

Un’ombra a più livelli

box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08),
    0px 4px 8px 0px rgba(0, 0, 0, 0.08),
    0px 12px 24px -4px rgba(0, 0, 0, 0.12);

Domande frequenti

Posso collegarmi direttamente a un generatore?

Sì. Aggiungi ?mode=gradient, ?mode=shadow, ?mode=glass, ?mode=easing o ?mode=blob all’indirizzo della pagina e quella scheda si apre subito.

Il glassmorphism funziona in tutti i browser?

backdrop-filter funziona nelle versioni attuali di Chrome, Edge, Firefox e Safari. Il codice include il prefisso -webkit- per le versioni meno recenti di Safari.

Che cos’è una funzione cubic-bezier?

Controlla come un’animazione accelera e rallenta. I quattro numeri sono le coordinate X e Y di due punti di controllo; ease-in-out è cubic-bezier(0.42, 0, 0.58, 1).

Posso usare i blob a scopo commerciale?

Sì. Ogni blob viene generato sul tuo dispositivo ed è tuo, utilizzabile ovunque senza attribuzione.

Ti servirà più potenza in futuro?

Strumenti premium, limiti più alti e accesso API sono in programma. La V1 resta gratuita e privata nel tuo browser.