সি- এস- এস উৎপাদক
বাণিজ্যিক ব্যবহার ঠিক আছে
581 মডেল
কোন ওয়াটারমার্ক নেই
কোন সাইন-আপ প্রয়োজন নেই
মডেল:
+ 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 ভালোবাসো?
সাবস্ক্রাইব করুন একটি রিফারেন্স লিঙ্ক পেতে এবং প্রতি বন্ধুর জন্য 30,000 টোকেন অর্জন করতে।
আরো চান?
বিনামূল্যে নিবন্ধন করুন: ৩০,০০০ টোকেন/দিন
বিনামূল্যে নিবন্ধন করুন
আপনার অনুরোধ প্রসেস করা হচ্ছে...
AI এর সাথে বিনামূল্যে CSS কোড তৈরি করুন।
ব্যবহারের নিয়ম সি- এস- এস উৎপাদক
1
আপনার ইনপুট লিখুন
টেক্সট টাইপ করুন, ফাইল আপলোড করুন, অথবা আপনি যা চান তা বর্ণনা করুন। কোন অ্যাকাউন্টের প্রয়োজন নেই।
2
ক্লিক করে তৈরি করুন
আমাদের এআই সেকেন্ডের মধ্যেই আপনার আবেদনের প্রক্রিয়া সম্পন্ন করে, সেক্ষেত্রে সেরা উন্মুক্ত উৎস মডেল ব্যবহার করা হয়।
3
ডাউনলোড এবং শেয়ার
আপনার ফলাফল ডাউনলোড, অনুলিপি অথবা শেয়ার করুন। ব্যক্তিগত এবং বাণিজ্যিক ব্যবহারের জন্য বিনামূল্যে।
API-র মাধ্যমে এই টুলটি ব্যবহার করুন
আপনার নিজের কোড থেকে এই টুলটি স্বয়ংক্রিয় করুন। OpenAI-সমর্থিত REST Endpoint, Bearer-token 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 টুল
সি- এস- এস উৎপাদক - FAQ
আধুনিক CSS3 - গ্রিড + Flexbox বিন্যাস, স্বনির্ধারিত বৈশিষ্ট্য (CSS চলক), কন্টেইনার অনুসন্ধান, color- mix (),: has () নির্বাচনকারী, লজিক বৈশিষ্ট্য, prefers- reduced- movement fallbacks । ৮ স্টাইল প্রাক- সেট (ভানিলা / Tailwind কনফিগ / Sass / CSS মডিউল / BEM / Atomic ইউটিলিটি / Print stylesheet / অ্যানিমেশন) । ডিফল্টভাবে মোবাইল- প্রথমে কনটেইনার অনুসন্ধান যেখানে তারা মিডিয়া অনুসন্ধান পরাজিত করে ।
হ্যাঁ - একটি সম্পূর্ণ উপাদান স্টাইলশীট খরচ ~1,000 টোকেন উপর Qwen3কোডার, মধ্যে 6,000 বেনামী / 30,000 সাবস্ক্রাইব- আপ দৈনিক পুল. প্রিমিয়াম Claude Sonnet / GPT-5 প্রতি কল জটিল বহু উপাদান নকশা সিস্টেম জন্য উপলব্ধ.
Vercel দ্বারা v0 (বিনামূল্যে স্তর + $20/মাস প্রো) React + Tailwind উপাদান উত্পাদন করে। Tailwind UI ($299 জীবনকাল) একটি বিনিময় উপাদান লাইব্রেরী। কার্সার ($20/মাস) এবং Copilot ($10-39/মাস) একটি IDE এর ভিতরে সাহায্য করে। আমাদের টুল এক-শট CSS - একটি বর্ণনা পেস্ট, ক্রস-ব্রাউজার-নিরাপদ CSS পেতে। Tailwind সঙ্গে ভালভাবে জুটি: Tailwind কনফিগারেশনে preset পরিবর্তন এবং আমরা একটি tailwind.config.js + ইউটিলিটি ক্লাস রৌ CSS এর পরিবর্তে লিখবে।
হ্যাঁ - থিমিং-এর জন্য CSS স্বনির্বাচিত বৈশিষ্ট্য, @layer-এর জন্য ক্যাস্কেড নিয়ন্ত্রণ, কন্টেইনার কোয়েরি (@container) যেখানে পিতামাতার-সাপেক্ষে আকার প্রদর্শন, পিতামাতা-ভিত্তিক স্টাইলিং-এর জন্য :has(), color-mix() এবং OKLCH-এর মতো রঙের ফাংশন প্রবেশযোগ্য রঙের হস্তক্ষেপের জন্য। প্রয়োজনে বিনয়ীভাবে ফিরে আসে।
Tailwind কনফিগারেশন প্রাক-নির্ধারিত নির্বাচন করুন। আউটপুট হচ্ছে Tailwind 3.x ইউটিলিটি ক্লাস আপনার tailwind.config.js-এ সংযুক্ত (যেটি আমরা প্রদর্শন করি যদি আপনি থিম স্বনির্বাচন অনুরোধ করেন)। HTML মারকুপ জন্য যে ক্লাসগুলিকে আবৃত করে, /code/html/-এ পরিবর্তন করুন এবং Tailwind প্রাক-নির্ধারিত নির্বাচন করুন।
Sass-এর প্রাক-নির্ধারিত মান নির্বাচন করুন। @use মডিউল সহযোগে.scss সিন্ট্যাক্স ব্যবহার করে আউটপুট (@import-এর পরিবর্তে), যেখানে স্পষ্টতা সহায়ক সেখানে নেস্টিং (সজ্জা হিসেবে নয়), পুনরায় ব্যবহারযোগ্য নকশার জন্য @mixin, মান গণনার জন্য @function। Dart Sass 1.50+-এর সাথে সামঞ্জস্যপূর্ণ।
অ্যানিমেশনের প্রাক-নির্ধারিত মান নির্বাচন করুন। আউটপুট @keyframes ব্যবহার করে, যার সাথে আছে cubic-bezier সময় নির্ধারণ, prefers-reduced-motion: প্রবেশযোগ্যতার জন্য অপ্রয়োজনীয় পরিবর্তন কমিয়ে আনা, শুধুমাত্র অ্যানিমেশনের বৈশিষ্ট্য পরিবর্তন করা। সম্ভব হলে শুধুমাত্র CSS ব্যবহার করা হবে (পরিবর্তন, অস্বচ্ছতা); JavaScript hooks শুধুমাত্র CSS-সক্ষম প্রভাবের জন্য প্রস্তাবিত।
উভয় -.block__element--modifier নামকরণ জন্য BEM বা একক উদ্দেশ্য ক্লাস জন্য Atomic ইউটিলিটি বেছে নিন। নামকরণ সংঘর্ষ ছাড়া উপাদান-পরিধি CSS এর জন্য CSS মডিউল বেছে নিন, যা স্থানীয়-পরিধি ক্লাস নাম উত্পাদন করে।
হ্যাঁ - প্রত্যেকটি প্রাক- নির্ধারিত ব্যবহার করে CSS স্বনির্বাচিত বৈশিষ্ট্য off [data- theme=dark] এবং একটি prefers- color- scheme: dark media query fallback. টগল থিম একটি এক- লাইন বৈশিষ্ট্য swap, কোন CSS পুনরায় কম্পাইল. Tailwind প্রাক- নির্ধারিত ব্যবহার করে অভ্যন্তরীণ dark: বৈশিষ্ট্য ।
Evergreen Chrome / Firefox / Safari (শেষ দুটি স্থিতিশীল মুক্তি) লক্ষ্য করে। @supports ব্লক ব্যবহার করে cutting-edge বৈশিষ্ট্য (:has (), কন্টেইনার কোয়েরি) যেখানে Safari 16+ গুরুত্বপূর্ণ। ফিরে ফেলে flexbox যেখানে পুরোনো Safari আপনার সাথে লড়াই করে। IE11 সমর্থন জন্য - দুঃখিত, আপনি /code/refactor/ ব্যবহার করতে হবে আউটপুটটি নিজে হাতে backport করতে।
মুদ্রণ স্টাইলশিট প্রাক-নির্ধারিত নির্বাচন করুন। @media মুদ্রণে সবকিছু আউটপুট ওয়ার্কশিট, রং-সংযোজন নির্ধারণ করুন: পটভূমির জন্য সঠিক, nav এবং ক্রোম লুকিয়ে রাখুন, ছবির আকার সঠিকভাবে, পৃষ্ঠা পরিষ্কারভাবে break-inside: কার্ডের ক্ষেত্রে এড়িয়ে চলুন দ্বারা ভাঙুন। পৃষ্ঠা-অনুপ্রেরণ ইঙ্গিত @page থেকে।
হ্যাঁ - এই পাতা নির্মাণের জন্য একই সিস্টেম প্রম্পট সহ /v1/chat/-এ POST করুন। Bearer auth, rate-limited। ডিজাইন-টোকেন পাইপলাইন অথবা কম্পোনেন্ট-লাইব্রেরী জেনারেটর ব্যবহারের জন্য উপযুক্ত। /api/-এ ডকুমেন্টেশন।
আপনি কিভাবে এই টুলটি রেটিং করবেন?