جوړوونکی
سوداګريزه کارونه
380+ ماډلونه
هېڅ اوبه نښه
هېڅ ننوت اړين نه دی
:ډول
+ 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.
څرګندونه
ژور غوراوي
پایله
.ټېکېنونه کم دي
نور توکي اخيستل
❤️ Free.ai مینه؟ خپل ملګرو ته ووایاست!
سپړنه وکړئ د حوالې لینک ترلاسه کولو او د هر ملګري لپاره د 25,000 توکو ترلاسه کولو لپاره.
نور غواړﺉ؟
د 30K توکي / ورځ + 10K بونس لپاره وړیا نوم لیکنه وکړئ
د وړيا لپاره راجستر شئ
...ستاسو غوښتنه بهير کيږي
د وړيا لپاره AI سره CSS کوډ توليد.
څنګه کارول جوړوونکی
1
خپل ننوت وليکﺉ
ليکنه وليکﺉ، دوتنه رالېښﺉ، يا هغه څه وټاکﺉ چې غواړﺉ. هېڅ ګڼون نه اړين دی.
2
جوړولو ته کېکاږﺉ
زموږ AI ستاسو غوښتنه په ثانیو کې د غوره خلاص سرچینې ماډلونو په کارولو سره پروسس کوي.
3
رالېښل & ونډول
ډاونلوډ، کاپي، یا ستاسو د پایلو شریکول. د شخصي او سوداګریزو کارونې لپاره وړیا.
دا توکي په API کارول
د خپل کوډ څخه دا وسیله اتومات کړئ. د OpenAI-متوافق REST پای ټکی، د بارر-ټوکن اېټ، اضافي SDK ته اړتیا نلري. د توکن لګښتونه د ویب انٹرفیس سره مطابقت لري.
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."}]}'جوړوونکی — FAQ
عصري CSS3 - د گرډ + فلکسبکس ترتیبات، د ګمرک ملکیتونه (CSS متحولونه)، د کانټینر پوښتنې، رنګ-مکس ()،: د () انتخاب کونکي، منطقي ملکیتونه، د ترجیحاتو-کم شوي حرکت fallbacks. 8 سټایل پریسټونه (وینیل / ټیلوینډ کنفیګ / ساسس / CSS ماډلونه / بیم / اتومیک وسیله / د چاپ کولو سټایل شیټ / انیمیشن). د کانټینر پوښتنو سره د تل لپاره لومړی موبایل چیرې چې دوی د رسنیو پوښتنې وهل.
هو - د بشپړ اجزاو سټایل شیټ د Qwen 3 کوډر کې د ~ 1,000 توکو لګښتونه، د 2,500 نامعلوم / 10,000 ورځني سپارلو په دننه کې. د پریم Claude Sonnet / GPT-5 د پیچلي څو برخو ډیزاین سیسټمونو لپاره د هرې اړیکې لپاره شتون لري.
د ویرسیل لخوا v0 (خپل وړیا کچه + $ 20 / mo پرو) د عکس العمل + ټیلوینډ برخې رامینځته کوي. د ټیلوینډ UI ($ 299 ژوند وخت) د تادیې برخې کتابتون دی. کرسر ($ 20 / mo) او کوپیلوټ ($ 10-39 / mo) د IDE دننه مرسته کوي. زموږ وسیله یو-شوټ CSS ده - یو توضیحات پټ کړئ، د کراس براؤزر خوندي CSS ترلاسه کړئ. د ټیلوینډ سره ښه ملګري: د ټایلوینډ کنفیګ ته د پریمیم بدل کړئ او موږ به د خام CSS پرځای د tailwind.config.js + utility کلاسونه ولیکل شي.
هو - د CSS د دودیز ملکیتونو لپاره د CSS، د کاسکډ کنټرول لپاره @layer، د کانټینر پوښتنې (@ کانټینر) چیرې چې د مور-نږدې اندازه کول د ویډیو پورټ، د مور پر بنسټ د سټایل لپاره، د رنګ فعالیتونه لکه رنګ-مکس () او د لاسرسي وړ رنګ manipulation لپاره OKLCH.
د Tailwind config preset غوره کړئ. محصول د Tailwind 3.x utility کلاسونه ستاسو tailwind.config.js ته وصل شوي (چې موږ یې تولید کوو که تاسو د موضوع دودیز کولو لپاره وغواړئ). د HTML مارکپ لپاره چې ټولګي راټولوي، / کوډ / html / ته بدل کړئ او د Tailwind preset غوره کړئ.
د Sass preset غوره کړئ. د محصول کاروي.scss د @ use ماډلونو سره (نه د دودیز @ وارداتو سره)، د ځای ځای کول چیرې چې دا روښانتیا (نه لکه د سجاوٹ په توګه)، د بیا کارولو نمونو لپاره @mixin، د ارزښت محاسبه لپاره @function. د Dart Sass 1.50 + سره مطابقت لري.
د ژوندۍ انځور د مخکښ انتخاب. د خروجي سره د مکعب-bezier وخت سره @keyframes کاروي، غوره کوي-کم-حرکت: د لاسرسي لپاره overrides کموي، به-هغه د ځانګړتیاوو په اړه بدلون چې ژوندۍ انځور. CSS-هغه ځای چې ممکن وي (تبدیل، ناپاکتیا)؛ JavaScript hooks یوازې د غیر CSS-توان لرونکي اغیزو لپاره وړاندیز شوي.
دواړه - د.block __element لپاره BEM غوره کړئ - د بدلون نومونه، یا د واحد هدف کلاسونو لپاره اتومي وسیله. د CSS ماډلونو انتخاب کولو پرته د CSS ماډلونو لپاره، کوم چې په سیمه کې د کلاس نومونه تولیدوي.
هو - هر preset د CSS دوديزه ملکیتونه کاروي چې [د معلوماتو موضوع = تور] او همدارنګه د رنګ-رنګ-سکیم غوره کوي: د تور میډیا پوښتنې مخه نیسي. د توګنګ موضوع د یو کرښې ځانګړتیا تبادله ده، نه CSS بیا تنظیم کړئ. د تیلو وینډ پریسټ د جوړ شوي تور کاروي: ډول.
د هرډول کروم / فایرفاکس / سافیر (د وروستیو دوه مستحکم خپرونو) هدفونه. د کټ کولو ځانګړتیاو لپاره د @ ملاتړ بلاکونه کاروي (: لري (، د کانټینر پوښتنې) چیرې چې سافیر 16+ مهم دي. د فلکسبکس ته بیرته راځي چیرې چې زاړه سافیر تاسو سره مبارزه کوي. د IE11 ملاتړ لپاره - بخښنه غواړم، تاسو باید / کوډ / ریفکتور / وکاروئ ترڅو محصول په لاسي ډول بیرته راشي.
د چاپ کولو سټایل شیټ پریزنټشن غوره کړئ. د محصول ټول په @media چاپ کې راوځي، د رنګ تنظیم تنظیموي: د پس منظر لپاره دقیق، د NAV او کروم پټوي، د عکسونو اندازه په منطقي ډول، د مینځپانګې سره پاکې پا pagesې ماتوي: په کارتونو کې مخنیوی وکړئ. د @page له لارې د پاڼې لارښود اشاره.
هو - د / v1 / چیټ / سره د ورته سیسټم پریم سره د دې مخ جوړوي. د بارر اېټ، د نرخ محدود. د ډیزاین-ټوکن پایپ لاینونو یا برخې-کتابتون تولیداتو لپاره ښه. په / api / کې د Docs.
تاسو به دا توکي څنګه درجه بندي کړئ؟