Generator
Komercijalna upotreba OK
380+ modela
Nema vodenog žiga
Nema potrebe za prijavom
Model:
+ 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.
Objašnjenje
Napredne opcije
Rezultat
Žetoni nestaju.
Dobiti više tokena
Hoćeš još?
Prijavite se besplatno za 30K žetona dnevno + 10K bonusa
Prijavite se besplatno
Obrađujem vaš zahtjev...
Generiraj CSS kod sa UI besplatno.
Kako koristiti Generator
1
Unesite svoj unos
Unesite tekst, učitajte datoteku, ili opišite šta želite. Nema potrebe za računom.
2
Kliknite da generirate
Naša UI obrađuje vaš zahtjev u sekundama koristeći najbolje modele otvorenog koda.
3
Preuzmi i podijeli
Preuzmite, kopirajte ili podijelite svoj rezultat. Besplatno za ličnu i komercijalnu upotrebu.
Koristi ovaj alat preko API-ja
Automatizirajte ovaj alat iz vlastitog koda. OpenAI-kompatibilna REST krajnja tačka, Bearer-token autentifikacija, nije potreban dodatni SDK. Token troškovi odgovaraju web sučelju.
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."}]}'Srodni besplatni UI alati
Generator — FAQ
Moderni CSS3 - Rešetka + Flexbox rasporedi, prilagođene osobine (CSS varijable), upiti kontejnera, color-mix(), :has() selektori, logičke osobine, prefers-reduced-motion fallbacks. 8 stilskih unaprijed postavljenih (Vanilla / Tailwind konfig / Sass / CSS Moduli / BEM / Atomic utility / Print stylesheet / Animation). Mobilni prvi po defaultu sa upiti kontejnera gdje su pobijedili medijske upite.
Da - kompletna komponentna stilska tablica košta ~1.000 žetona na Qwen 3 Coderu, unutar 2.500 anonimnih / 10.000 pretplaćenih dnevnog bazena. Premium Claude Sonnet / GPT-5 dostupan po pozivu za kompleksne višekomponentne dizajnerske sisteme.
v0 by Vercel (free tier + $20/mo Pro) generates React + Tailwind components. Tailwind UI ($299 lifetime) is a paid component library. Cursor ($20/mo) and Copilot ($10-39/mo) help inside an IDE. Our tool is one-shot CSS - paste a description, get cross-browser-safe CSS. Pairs well with Tailwind: switch the preset to Tailwind config and we will write a tailwind.config.js + utility classes instead of raw CSS.
Da - CSS prilagođena svojstva za teme, @layer za kaskadnu kontrolu, upite za kontejner (@container) gdje se veličina u odnosu na roditelja mijenja u odnosu na prikazni prozor, :has() za stilizaciju zasnovanu na roditelju, funkcije boja poput color-mix() i OKLCH za pristupačnu manipulaciju bojama.
Odaberite Tailwind konfiguracijsku unaprijed postavku. Izlaz je Tailwind 3.x korisničke klase ožičene na vaš tailwind.config.js (koji ćemo generirati zajedno ako zatražite prilagodbu teme). Za HTML oznake koje omotaju klase, prebacite se na /code/html/ i odaberite Tailwind unaprijed postavku.
Izaberite Sass unaprijed postavljeno. Izlaz koristi.scss sintaksu sa @use modulima (ne zastarjeli @import), ugniježđivanje gdje pomaže jasnoći (ne kao dekoracija), @mixin za višekratnu upotrebu uzoraka, @function za izračun vrijednosti. Kompatibilan sa Dart Sass 1.50+.
Odaberite unaprijed postavljenu animaciju. Izlaz koristi @keyframes sa kubnim bezier-vrijemenjem, preferira-reduced-motion: smanji nadglasavanje za pristupačnost, promijenit će samo na osobinama koje animiraju. CSS-samo gdje je moguće (transformacije, neprozirnost); JavaScript kuke predložene samo za efekte koji ne podržavaju CSS.
Oba - odaberite BEM za.block__element--modifier naming, ili Atomic utility za jednonamjenske klase. Za komponentno-opsežni CSS bez sukoba naziva odaberite CSS Moduli, koji generira lokalno-opsežne nazive klasa.
Da - svaka unaprijed postavljena postavka koristi prilagođene CSS osobine isključene [data-theme=dark] plus prefers-color-scheme: dark media upit za pomoć. Prebacivanje teme je jednolinijska zamjena atributa, bez CSS rekompiliranja. Tailwind unaprijed postavljena postavka koristi ugrađenu dark: varijantu.
Cilj je uvijek novi Chrome / Firefox / Safari (zadnja dva stabilna izdanja). Koristi @supports blokove za vrhunske mogućnosti (:has(), upite za spremnike) gdje je Safari 16+ važan. Vraća se na flexbox gdje se stariji Safari bori protiv vas. Za IE11 podršku - žao mi je, trebali biste koristiti /code/refactor/ da ručno backport izlaz.
Odaberite unaprijed postavljenu stilsku tablicu za štampanje. Izlaz omotava sve u @media print, postavlja prilagodbu boja: tačno za pozadine, skriva navigaciju i krom, razumno veličine slika, čisto razdvaja stranice sa break-inside: izbjegavajte na karticama. Savjet za orijentaciju stranice putem @page.
Da - POST u /v1/chat/ sa istim sistemskim promptom koji gradi ovu stranicu. Nosilac autentifikacije, ograničen brzinom. Dobar za dizajn-token cjevovode ili generatore komponent-biblioteka. Dokumentacija na /api/.
Kako bi ocijenili ovaj alat?