Generare CSS in modo visuale
Quattro pezzi di CSS che tutti scrivono per tentativi, con i tentativi fatti sui cursori invece che dentro il tuo foglio di stile.
- Funziona interamente nel tuo browser
- Funziona offline
- Niente upload
- Niente registrazione
- Niente filigrana
Caricamento dello strumento…
Come funziona
- Scegli il pannello: gradiente, ombra, angoli o misura fluida.
- Trascina finché l’anteprima non è come la vuoi.
- Copia fuori la riga di CSS.
Perché non viene caricato nulla
Ogni operazione di questa pagina la esegue codice che gira dentro la scheda del tuo browser, con lo stesso motore che disegna le pagine web. Il file viene letto dal disco alla memoria della scheda, trasformato lì e riscritto come download. Non viene mai inviato da nessuna parte: né a noi, né a terzi.
Verificalo tu stesso
- Apri gli strumenti per sviluppatori del browser (F12) e scegli la scheda «Rete».
- Carica il tuo file e avvia lo strumento.
- Le uniche richieste che vedrai scaricano il codice dello strumento stesso — e, in pochi strumenti pesanti, il loro motore open source da una CDN pubblica — più un piccolo segnale di visita verso loreatec.jp (indirizzo e titolo della pagina, nulla di più). Nessuna di esse porta con sé il tuo file.
Domande frequenti
Che cosa calcola davvero il pannello clamp()?
La pendenza lineare. Tu dici «16px con una finestra da 360px, 32px a 1280px» e lui produce clamp(16px, 8.3px + 2.17vw, 32px): il valore scala in modo continuo tra le tue due larghezze e si ferma ai due estremi. La formula è semplice e non se la ricorda nessuno; lo strumento è tutto qui.
Perché le ombre preimpostate vengono meglio di quelle che scrivo a mano?
Perché le ombre realistiche hanno un’opacità più bassa, una sfocatura più ampia e un’espansione leggermente negativa rispetto a quello che suggerisce l’intuito. Le preimpostazioni contengono già quelle proporzioni: parti da una e regola, invece che da 0 0 5px black.
Posso fare le forme organiche con gli angoli irregolari?
Spunta l’opzione per singolo angolo e imposta i quattro raggi separatamente: due angoli opposti molto grandi danno la forma a foglia. Per le forme davvero organiche serve la sintassi del raggio a due valori, che va oltre questo pannello; quello che c’è copre le forme che si usano davvero.
Viene inviato qualcosa da qualche parte?
No. L’anteprima è un riquadro della pagina con i tuoi stili applicati sopra — la cosa più locale che uno strumento possa fare.