Moetsi oa CSS
Ho sebelisoa ka khoebo
380+ li-models
Ha ho letšoao la metsi
Ha ho hlokahale ho ngolisoa
Mofuta:
+ 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.
Boithuto
Likhetho tse tsoetseng pele
Bo_lemo
Tokens e tlase.
Fumana Token e eketsehileng
❤️ U rata Free.ai? Reka le metsoalle ea hau!
Register ho fumana sehokela sa ho u joetsa le ho fumana li-token tse 25 000 ka motsoalle.
U batla ho feta?
Ngola mahala bakeng sa 30K tokens / letsatsi + 10K bonus
Ngola mahala
Ho sebetsana le kopo ea hau...
E etsa CSS code ka AI ka mahala.
Mokhoa oa ho sebelisa Moetsi oa CSS
1
Ke eng eo u e kentseng?
Tlatsa mongolo, kenya faele, kapa hlalosa seo u se batlang. Ha ho hlokahale ak'haonte.
2
Tobetsa ho theha
AI ea rona e sebetsana le kopo ea hau ka metsotsoana ka ho sebelisa li-models tse ntlehali tsa open-source.
3
Tlosa & & arolelana
Kopitsa, kenya kapa arolelana litlamorao tsa hau. Haholo-holo bakeng sa ho sebelisana le batho ba bang le ho rekisa.
Senya sesebelisoa ka API
E-ba le sesebelisoa sena ka ho iketsetsa ho tloha ho kotloloho. OpenAI-compatible REST endpoint, Bearer-token auth, ha ho hlokahale SDK e eketsehileng. Litheko tsa token li lumellana le interface ea webosaeteng.
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."}]}'Li-Tools tsa AI tse Bulehileng tse Bulehileng
Moetsi oa CSS — FAQ
CSS3 e ncha - Li- layout tsa Grid + Flexbox, litšobotsi tsa hau (liphetoho tsa CSS), lipotso tsa li- container, color- mix (), : has () ba khethang, litšobotsi tsa bonono, likhetho tsa ho fokotsa- ho tsamaea. Li- preset tsa 8 tsa setaele (Vanilla / Tailwind config / Sass / CSS Modules / BEM / Atomic utility / Print stylesheet / Animation). Mobile- first ka ho nepahala le lipotso tsa li- container moo ba behang lipotso tsa media.
Ea - a pheletsong ya karolo stylesheet theko ~ 1,000 tokens ka Qwen 3 Coder, ka hare ho 2,500 Anonymous / 10,000 signed-up letsatsi le letsatsi pool. Premium Claude Sonnet / GPT-5 fumaneha ka-call bakeng sa li-systems diphapang-phapang difaele.
v0 ke Vercel (sekhahla se mahala + $ 20 / mo Pro) se hlahisa likarolo tsa React + Tailwind. Tailwind UI ($ 299 bophelo) ke laeborari ea likarolo tse lefelloeng. Cursor ($ 20 / mo) le Copilot ($ 10-39 / mo) li thusa kahare ho IDE. Mochini oa rona ke CSS e le 'ngoe - kenya tlhaiso-leseling, fumana CSS e sireletsehileng ea cross-browser. Li-pairs tse ntle le Tailwind: fetolela preset ho Tailwind config' me re tla ngola tailwind.config.js + lihlopha tsa litšebeletso eseng CSS e sa pheleng.
E-na - Litšobotsi tsa CSS tsa khethehileng bakeng sa ho hlophisa, @layer bakeng sa ho laola ka ho toba, lipotso tsa liphutheloana (@liphutheloana) moo ho behiloeng boholo bo amanang le ngoana ho behang ho bona, :has () bakeng sa ho hlophisa ka mokhoa o ipapisitse le ngoana, li-functions tsa'mala joalo ka color-mix () le OKLCH bakeng sa ho hlophisa' mala o fumanehang. E khutlela morao ka mokhoa o bonolo moo ho hlokahalang.
Khetha Tailwind config preset. Mofuta oa tlhahiso ke Tailwind 3.x utility classes e nang le wire ho tailwind.config.js (e re e etsang ka lehlakoreng le leng haeba u batla ho fetola moralo). Bakeng sa HTML markup e etsang hore lihlopha li be le li-wrap, fetolela ho /code/html/'me u khetha Tailwind preset.
Khetha Sass e hlophisitsoeng pele. Mofuta o tsoakang o sebelisa.scss syntax le @use modules (eseng @import e sa sebelisoang), ho beha moo ho thusang ho hlakile (eseng e le ho khabisa), @mixin bakeng sa li-pattern tse ka sebelisoang hape, @function bakeng sa ho ngola litheko. Ho lumellana le Dart Sass 1.50+.
Khetha ho hlophisoa pele ha animation. Phetoho e sebelisa @keyframes le nako ea cubic-bezier, e khetha-ho-phetoha-ho-phetoha: ho fokotsa ho fetisoa bakeng sa ho fihlella, ho tla-tsosolosoa feela ka litšobotsi tse nang le animation. CSS feela moo ho ka khonehang (ho fetola, ho se bonahale); li-hook tsa JavaScript li khothalletsoa feela bakeng sa litlamorao tse sa lumellaneng le CSS.
Bothata - khetha BEM bakeng sa.block__element--modifier naming, kapa Atomic utility bakeng sa lihlopha tse lebisang ho e mong. Bakeng sa CSS e nang le li-component-scoped ntle le ho na le li-collisions tsa ho namela, khetha CSS Modules, e etsang hore li-class li be le li-scoped names tsa lihlopha.
Ee - ho hlophisoa ka pele ho ka sebelisoa litšobotsi tsa CSS tse hlophisitsoeng ka ho khetheha tse kentsoeng [data-theme=dark] le prefers-color-scheme: dark media query fallback. Ho fetola moralo ke ho fetola litšobotsi ka lebokoseng leng, ha ho na CSS e hlophisitsoeng ka morao. Ho hlophisoa ka pele ha Tailwind ho sebelisa mofuta o hlophisitsoeng oa dark:.
E lebisa ho Chrome / Firefox / Safari (li-releases tse peli tse sa fetoheng). E sebelisa li-blocks tsa @supports bakeng sa li-features tse ncha (:has(), lipotso tsa li-container) moo Safari 16+ e leng bohlokoa. E khutlela morao ho flexbox moo Safari e fetileng e u khahlanong le uena. Bakeng sa ho tšehetsa IE11 - kea leboha, u lokela ho sebelisa /code/refactor/ ho khutlisa tlhahiso ka letsoho.
Khetha lebokose la setaele la ho Tlatsa le hlophisitsoeng pele. Mofuta o ka tlaase o tlatsa tsohle ka ho tlatsa @media, o beha ho fetolela-litšoantšo: ho nepahala bakeng sa morao, o senya navigator le chrome, o etsa boholo ba litšoantšo ka tsela e nepahetseng, o tlosa lihlooho ka ho hloekisa ka ho tlosa-kahare: ho se ke ha etsoa ka li-cards. Ho tšoaea ho otloloha ha leqepheng ka @page.
Ee - POST ho /v1/chat/ ka kopo ea sistimi eo leqepheng lena le e etsang. Ho lekola, ho lekanyelitsoe ka lebelo. Ho molemo bakeng sa li-pipelines tsa design-token kapa li-generator tsa libuka tsa likarolo. Litokomane li ka /api/.
U tla lekola eng ka sesebelisoa sena?