Generator
Komercijalna upotreba OK
581 modeli
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
❤️ Volim Free.ai?
Prijavite seda biste dobili link za preporuku i zaradili 30.000 žetona po prijatelju.
Hoćeš još?
Prijavite se besplatno: 30.000 žetona/dan
Prijavite se besplatno
Obrađujem vaš zahtjev...
Generirajte CSS kod sa AI besplatno.
Kako koristiti Generator
1
Unesite svoj unos
Utipkajte tekst, prenesite datoteku ili opišite što želite. Nema potrebe za računom.
2
Klikni da generiraš
Naša AI 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 vašeg koda. OpenAI-kompatibilna REST krajnja tačka, Bearer-token auth, nije potrebno dodatno SDK. Token troškovi odgovaraju web interfejsu.
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."}]}'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 preduzetvi (Vanilla / Tailwind config / Sass / CSS Moduli / BEM / Atomic utility / Print stylesheet / Animation). Mobilni prvi po defaultu sa upiti kontejnera gdje su pobijedili medijske upite.
Da - kompletna komponenta stylesheet košta ~1,000 tokens na Qwen 3 Coder, unutar 6,000 anonimnih / 30,000 prijavljenih dnevnog poola. Premium Claude Sonnet / GPT-5 dostupni 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 nadmašuje u pogledu, :has() za stil zasnovan na roditelju, funkcije boja kao što su color-mix() i OKLCH za pristupačnu manipulaciju bojama. Vraća se graciozno gdje je potrebno.
Odaberite Tailwind konfiguracijsku predpostavku. Izlaz je Tailwind 3.x klasa korisnih programa ožičena na vaš tailwind.config.js (koji generiramo zajedno ako zatražite prilagodbu teme). Za HTML oznaku koja omotava klase, prebacite se na /code/html/ i odaberite Tailwind predpostavku.
Izaberite Sass predpostavku. Izlaz koristi.scss sintaksu sa @use modulima (ne zastarjeli @import), ugniježđivanje gdje to pomaže jasnoći (ne kao dekoracija), @mixin za višekratno upotrebljive uzorke, @function za izračun vrijednosti. Kompatibilan sa Dart Sass 1.50+.
Odaberite unaprijed postavljenu animaciju. Izlaz koristi @keyframes sa kubnim bezier vremenskim rasporedom, prefers-reduced-motion: smanjiti nadglasavanje za pristupačnost, will-change 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 - izaberite BEM za.block__element--modifier naming, ili Atomic utility za jednonamjenske klase. Za komponentno-opsežni CSS bez sukoba naziva izaberite CSS Moduli, koji generira lokalno-opsežna imena klasa.
Da - svaka unaprijed postavljena postavka koristi CSS prilagođene osobine isključene [data-theme=dark] plus prefers-color-scheme: dark media query fallback. Prebacivanje teme je jednolinijska zamjena atributa, bez CSS rekompiliranja. Tailwind unaprijed postavljena postavka koristi ugrađenu dark: varijantu.
Cilj je uvijek zelen Chrome / Firefox / Safari (zadnja dva stabilna izdanja). Koristi @supports blokove za vrhunske mogućnosti (:has(), upite kontejnera) 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 štampanju, postavlja prilagodbu boja: tačno za pozadine, skriva navigaciju i krom, razumno veličinu slika, čisto razdvaja stranice sa break-inside: izbjegavajte na karticama. Savjet za orijentacije stranica putem @page.
Da - POST u /v1/chat/ sa istim sistemskim promptom koji ova stranica gradi. Bearer auth, speed-limited. Good for design-token pipelines or component-library generators. Docs at /api/.
Kako bi ocijenili ovaj alat?