Generatore CSS
- I file non lasciano il dispositivo
- Funziona nel browser
- Gratis, senza account, senza filigrana
Tailwind (arbitrary value)
shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]Come usare Generatore CSS
Genera CSS in modo visivo con un'anteprima in tempo reale: ombra, clip path, easing cubic bezier, glassmorphism, raggio blob e ombra del testo. Ogni generatore dà CSS semplice e una classe Tailwind a valore arbitrario, pronti da copiare.
- 1
Scegli un generatore: Ombra, Clip path, Cubic bezier, Glassmorphism, Raggio blob o Ombra del testo.
- 2
Parti da un preset, oppure regola cursori e colori.
- 3
Trascina direttamente sull'anteprima dove è offerto: i punti del clip-path, le due maniglie bezier o le maniglie del blob.
- 4
Copia il CSS o la classe Tailwind dall'output sotto.
Domande frequenti
Posso impilare più ombre?
Sì. In Ombra, fai clic su Aggiungi livello per combinare livelli, ognuno con scostamento, sfocatura, diffusione, colore, opacità e inset propri.
Come aggiungo o tolgo punti su un clip path?
Fai doppio clic sul bordo della forma per aggiungere un punto; seleziona un punto e premi Canc per rimuoverlo. Le forme Cerchio, Ellisse e Inset usano invece i cursori.
Perché non vedo l'effetto vetro?
backdrop-filter sfoca solo ciò che sta dietro l'elemento, quindi serve uno sfondo colorato o affollato. L'output include il prefisso -webkit- per Safari.
Cosa fanno i valori bezier fuori da 0–1?
I valori Y sopra 1 o sotto 0 fanno superare il movimento, il che dà un effetto di rimbalzo o di anticipazione. Premi Play per confrontarlo con il movimento lineare.
L'output Tailwind ha bisogno di un plugin?
No. Usa la sintassi a valore arbitrario di Tailwind, come rounded-[…] o [clip-path:…], che funziona nel Tailwind standard.