Generatore CSS
Uso commerciale OK
modelli 581
Nessuna filigrana
Nessun segno necessario
Modello:
+ GPT-5, Claude, Gemini
Describe a layout or component and get modern CSS3 - Grid + Flexbox, custom properties, container queries, color-mix(), :has() selectors, prefers-reduced-motion. Mobile-first by default. Self-hosted Qwen 3 Coder is free under the daily pool; premium models nail complex multi-component design systems.
Spiegazione
Opzioni avanzate
Risultato
I token sono bassi.
Ottenere più token
❤️ Love Free.ai? Dillo ai tuoi amici!
Iscriviti per ottenere un link di referral e guadagnare 30.000 gettoni per amico.
Ne vuoi ancora?
Iscriviti gratis: 30.000 gettoni al giorno
Iscriviti gratis
Elaborazione della tua richiesta...
Generare il codice CSS con AI gratuitamente.
Come usare Generatore CSS
1
Inserisci il tuo input
Digitare testo, caricare un file o descrivere ciò che si desidera. Nessun account necessario.
2
Fare clic su genera
La nostra AI elabora la tua richiesta in pochi secondi utilizzando i migliori modelli open-source.
3
Scarica & condivisione
Scaricare, copiare o condividere il risultato. Gratis per uso personale e commerciale.
Usa questo strumento tramite API
Automatizzare questo strumento dal proprio codice. Endpoint REST compatibile con OpenAI, auth Bearer-token, nessun SDK aggiuntivo richiesto. I costi Token corrispondono all'interfaccia web.
curl -X POST https://api.free.ai/v1/chat/ \
-H "Authorization: Bearer sk-free-..." \
-H "Content-Type: application/json" \
-d '{"model": "qwen-coder", "messages": [{"role": "user", "content": "Write a Python function that reverses a string."}]}'Generatore CSS - FAQ
Moderno CSS3 - Layout Grid + Flexbox, proprietà personalizzate (variabili CSS), richieste di container, colori-mix(), :has() selettori, proprietà logiche, predefinite ripiego-mozione. 8 preset di stile (Vanilla / Config Tailwind / Sass / CSS Modules / BEM / Atomic utility / Stampa foglio di stile / animazione). Mobile-first per impostazione predefinita con query di container dove battere le query multimediali.
Sì - un foglio di stile completo dei componenti costa ~1.000 gettoni su Qwen 3 Coder, all'interno del pool giornaliero di 6.000 anonimi / 30.000 iscritti. Premium Claude Sonnet / GPT-5 disponibile per chiamata per sistemi di progettazione complessi multicomponente.
v0 di Vercel (livello Gratis + $20/mo Pro) genera React + componenti del vento di coda. L'interfaccia utente del vento di coda ($299 lifetime) è una libreria di componenti a pagamento. Cursore ($20/mo) e Copilot ($10-39/mo) aiutano all'interno di un IDE. Il nostro strumento è un colpo di coda CSS - incolla una descrizione, ottenere cross-browser-safe CSS. Coppie bene con vento di coda: passare il preset a Config vento di coda e scriveremo un vento di coda.config.js + classi di utilità invece di CSS grezzo.
Sì - Proprietà personalizzate CSS per il loro, @layer per il controllo a cascata, query container (@container) dove visore battute di dimensionamento parente-relative, :has() per lo stile basato sui genitori, funzioni di colore come colore-mix() e OKLCH per la manipolazione del colore accessibile. Ripiega con grazia dove necessario.
Scegli il preset di configurazione del vento di coda. L'output è Tailwind 3.x classi utility cablate sul tuo tailwind.config.js (che generiamo insieme se si chiede la personalizzazione del tema). Per il markup HTML che avvolge le classi, passare a /code/html/ e selezionare il preset del vento di coda.
Scegli il preset Sass. Output utilizza la sintassi.scss con moduli @use (non la deprecata @import), nidificante dove aiuta la chiarezza (non come decorazione), @mixin per i modelli riutilizzabili, @function per il calcolo del valore. Compatibile con Dart Sass 1.50+.
Scegli il preset di animazione. L'output utilizza @keyframe con tempi cubici-bezier, preferisci-ridotto-mozione: ridurre gli overdride per l'accessibilità, cambiare solo sulle proprietà che animano. CSS-solo dove possibile (trasformazioni, opacità); ganci JavaScript suggerito solo per effetti non CSS-able.
Entrambi - scegliere BEM per.block__element--modificatore nome, o utilità Atomica per classi monouso. Per componente-scoperta CSS senza collisioni nomi scegliere moduli CSS, che genera localmente-scoperto nomi di classe.
Sì - ogni preset usa le proprietà personalizzate CSS keyed off [data-theme=dark] più un programma di colori preferiti: reverseback delle query media dark. Il tema di commutazione è uno swap di attributi a una riga, nessun ricompilo CSS. Il preimpostato tailwind utilizza la variante built-in dark:.
Targets evergreen Chrome / Firefox / Safari (le ultime due versioni stabili). Utilizza i blocchi @supports per le funzionalità all'avanguardia (:has(), query container) dove Safari 16+ conta. Ripiega alla flexbox dove Safari più vecchio ti combatte. Per supporto IE11 - scusa, si dovrebbe utilizzare /code/refattore/ per backport manuale l'output.
Scegli il preset del foglio di stile di stampa. L'output avvolge tutto in @media print, imposta il colore-regolazione: esatto per gli sfondi, nasconde nav e chrome, dimensioni immagini con sensibilità, rompe le pagine con break-inside: evitare sulle carte.
Sì - POST a /v1/chat/ con lo stesso sistema richiede questa pagina costruisce. Portatore auth, tasso limitato. Buono per pipeline di progettazione-token o generatori di biblioteca componenti. Documenti a /api/.
Iscriviti gratis: 30.000 gettoni al giorno
Crea account gratuitoNon è richiesta alcuna carta di credito
Come valuteresti questo strumento?