CSS ජනකය
වාණිජ භාවිතය OK
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 කේතය ජනනය කරන්න.
භාවිතා කරන ආකාරය CSS ජනකය
1
ඔබේ ආදාන ඇතුළත් කරන්න
පෙළ වර්ග, ගොනුවක් උඩුගත, හෝ ඔබට අවශ්ය දේ විස්තර. ගිණුමක් අවශ්ය නැත.
2
ජනනය කරන්න ක්ලික් කරන්න
අපගේ AI හොඳම විවෘත මූලාශ්රය ආකෘති භාවිතා තත්පර තුළ ඔබේ ඉල්ලීම ක්රියාවලිය.
3
බාගත කිරීම සහ හුවමාරුව
බාගත, පිටපත්, හෝ ඔබේ ප්රතිඵල බෙදා. පෞද්ගලික හා වාණිජ භාවිතය සඳහා නිදහස්.
API හරහා මෙම මෙවලම භාවිතා කරන්න
ඔබේම කේතය සිට මෙම මෙවලම ස්වයංක්රීය කරන්න. OpenAI-සමකල හැකි REST අවසන් ස්ථානය, දරන්නා-ටොකන් auth, අමතර 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."}]}'අදාළ නිදහස් AI මෙවලම්
CSS ජනකය — FAQ
නවීන CSS3 - Grid + Flexbox සැකසුම්, අභිරුචි ගුණාංග (CSS විචල්ය), බහාලුම් විමසීම්, වර්ණ මිශ්රණය (), () තේරීම්, තාර්කික ගුණාංග, කැමති-අඩු-චලනය fallbacks. 8 ශෛලිය පෙරනිමි (වැන්ඩා / Tailwind config / Sass / CSS මොඩියුල / BEM / පරමාණුක උපයෝගීතාව / මුද්රණය stylesheet / සජීවීකරණය). ඔවුන් මාධ්ය විමසුම් පරාජය කරන ස්ථානයේ බහාලුම් විමසුම් සමඟ පෙරනිමියෙන් ජංගම පළමු.
ඔව් - සම්පූර්ණ සංරචක stylesheet Qwen3Coder මත ~ 1,000 ටොකන් වියදම්, 2,500 නිශ්චිත / 10,000 දෛනික ලියාපදිංචි-උඩට පූල් ඇතුළත. වාරික Claude Sonnet / GPT-5 සංකීර්ණ බහු සංරචක සැලසුම් පද්ධති සඳහා ඇමතුමකට ලබා ගත හැක.
Vercel විසින් v0 (නිදහස් තලය + $ 20/mo Pro) ප් රතිචාර දක්වන්න + Tailwind සංරචක ජනනය කරයි. Tailwind UI ($ 299 ජීවිත කාලය) ගෙවන සංරචක පුස්තකාලයකි. කර්සරය ($ 20/mo) සහ Copilot ($ 10-39/mo) IDE තුළ උදව්. අපගේ මෙවලම එක්-ෂොට් CSS වේ - විස්තරයක් ඇලවීම, හරස්-බ් රවුසර-ආරක්ෂිත CSS ලබා ගැනීම. Tailwind සමඟ හොඳින් යුගල: Tailwind config වෙත පෙරනිමි මාරු කර අමු CSS වෙනුවට tailwind.config.js + උපයෝගීතා පන්ති ලියනු ඇත.
ඔව් - තේමා සඳහා CSS අභිරුචි ගුණාංග, @layer කුණාටු පාලනය සඳහා, බාල්දි විමසීම් (@container) මව්-සාපේක්ෂ ප්රමාණය viewport පරාජය කරන තැන,: මව් පදනම් styling සඳහා (), වර්ණ මිශ්ර () හා ප්රවේශ වර්ණ හැසිරවීම සඳහා OKLCH වැනි වර්ණ කාර්යයන් ඇත (). අවශ්ය තැන්වල ආපසු සරලව වැටේ.
Tailwind config preset තෝරන්න. ප්රතිදානය Tailwind වේ 3.x උපයෝගීතා පන්ති ඔබේ tailwind.config.js වයර් (ඔබ තේමා රිසිකරණය ඉල්ලා නම් අපි පසෙකින් ජනනය කරන). පන්ති ඇසුරුම් HTML markup සඳහා, / code / html / මාරු හා Tailwind preset තෝරන්න.
Sass පෙරනිමි තෝරන්න. ප්රතිදානය භාවිතා කරයි.scss @use මොඩියුල සමග ව්යුහය (අවසන් @import නොවේ), එය පැහැදිලිව උපකාරී වන තැන නස්ටිං (විසිතුරු ලෙස නොවේ), නැවත භාවිතා කළ හැකි රටා සඳහා @mixin, අගය ගණනය සඳහා @function. ඩාට් Sass සමග අනුකූල 1.50+.
සජීවීකරණය පෙරනිමි තෝරන්න. ප්රතිදානය ඝනක-bezier වේලාව සමග @keyframes භාවිතා කරයි, කැමති-අඩු-චලනය: ප්රවේශ විය හැකි සඳහා overrides අඩු, සජීවීකරණය බව වත්කම් මත පමණක් වෙනස් වනු ඇත. CSS-එකම හැකි තැන (පරිවර්තන, අඳුරු); ජාවාස්ක්රිප්ට් හූක් යෝජනා පමණක් CSS-සහායී බලපෑම් සඳහා.
දෙකම -.block __element සඳහා BEM තෝරන්න - වෙනස් කරන්නා නම් කිරීම, හෝ තනි අරමුණක් පන්ති සඳහා පරමාණුක උපයෝගීතාව. ගැටුම් නම් කිරීම තොරව සංරචක-විෂය පථය CSS සඳහා, දේශීය-විෂය පථය පන්ති නාම ජනනය කරන CSS මොඩියුල තෝරන්න.
ඔව් - සෑම පෙරනිමි CSS අභිරුචි ගුණාංග භාවිතා off-keyed [දත්ත-තේමා = අඳුරු] ප්ලස් කැමති-වර්ණ-ව්යාපෘතිය: අඳුරු මාධ්ය විමසුම් පසුබැසීම. තේමාව තෝරාගැනීම එක්-රේඛාව ගුණාංගය swap වේ, කිසිදු CSS නැවත සංස්කරණය. Tailwind පෙරනිමි තිරය තුළ අඳුරු භාවිතා: විකල්පය.
Evergreen Chrome / Firefox / Safari ඉලක්ක (පසුගිය ස්ථාවර දෙකක් නිකුතු). Safari 16+ වැදගත් වන තැන කපන-අගල් විශේෂාංග සඳහා @supports කොටස් භාවිතා කරයි (: ඇත (), බහාලුම් විමසීම්). පැරණි Safari ඔබ සටන් කරන තැන flexbox නැවත වැටේ. IE11 සහාය සඳහා - සමාවෙන්න, ඔබ / code / refactor / භාවිතා කළ යුතුය ප්රතිදානය අතින් backport කිරීමට.
මුද්රණය stylesheet පෙර සැකසුම් තෝරන්න. ප්රතිදානය @media මුද්රණය සියලු ඇසුරුම්, වර්ණ-ගැලපීම සකස්: පසුබිම් සඳහා නිවැරදි, nav හා ක්රෝම් සඟවයි, රූප සිහියෙන් ප්රමාණය, බිඳ වැටීම-අභ්යන්තර සමග පිරිසිදු පිටු බිඳ වැටේ: කාඩ්පත් මත වළකින්න. @page හරහා පිටුව-කේන්ද්රගත ඉඟියක්.
ඔව් - මෙම පිටුව ගොඩනඟන එම පද්ධති ප්රතිඥා සමග /v1/chat/ POST. දරන්නා auth, අනුපාතය සීමා. නිර්මාණය-ටොකන් පයිප්ප හෝ සංරචක-පුස්තකාල ජනක සඳහා හොඳ. /api/ දී ලේඛන.
ඔබ කොහොමද මෙම මෙවලම ලකුණු කරන්නේ?