সিএসএস উৎপাদক
বাণিজ্যিক ব্যবহার ঠিক আছে
৩৮০+ মডেল
কোন ওয়াটারমার্ক নেই
কোন সাইন-আপ প্রয়োজন নেই
মডেল:
+ 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 ভালোবাসো?
সাবস্ক্রাইব করুন একটি রিফারেন্স লিংক পেতে এবং প্রতি বন্ধুর জন্য ২৫,০০০ টোকেন অর্জন করতে।
আরো চাও?
৩০K টোকেন/দিন + ১০K বোনাস এর জন্য বিনামূল্যে নিবন্ধন করুন
নিবন্ধন করুন
আপনার অনুরোধ প্রসেস করা হচ্ছে...
এআই এর সাথে বিনামূল্যে CSS কোড তৈরি করুন।
ব্যবহারের নিয়ম সিএসএস উৎপাদক
1
আপনার ইনপুট লিখুন
টেক্সট টাইপ করুন, একটি ফাইল আপলোড করুন, অথবা আপনি যা চান তা বর্ণনা করুন। কোন অ্যাকাউন্টের প্রয়োজন নেই।
2
ক্লিক করে তৈরি করুন
আমাদের এআই সেকেন্ডের মধ্যেই আপনার আবেদনের প্রক্রিয়া সম্পন্ন করে, সে জন্য সেরা উন্মুক্ত উৎস মডেল ব্যবহার করে।
3
ডাউনলোড এবং শেয়ার
আপনার ফলাফল ডাউনলোড, অনুলিপি অথবা শেয়ার করুন। ব্যক্তিগত এবং বাণিজ্যিক ব্যবহারের জন্য বিনামূল্যে।
API-র মাধ্যমে এই টুলটি ব্যবহার করুন
আপনার নিজের কোড থেকে এই টুলটি স্বয়ংক্রিয় করুন। OpenAI-সমর্থিত REST এন্ডপয়েন্ট, 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."}]}'সিএসএস উৎপাদক — FAQ
আধুনিক CSS3 - গ্রিড + Flexbox বিন্যাস, স্বনির্বাচিত বৈশিষ্ট্য (CSS চলক), কন্টেইনার অনুসন্ধান, color- mix (), : has () নির্বাচনকারী, যৌক্তিক বৈশিষ্ট্য, prefers- reduced- movement fallbacks । ৮ স্টাইল প্রাক- সেট (ভানিলা / Tailwind কনফিগ / Sass / CSS মডিউল / BEM / Atomic ইউটিলিটি / Print stylesheet / অ্যানিমেশন) । ডিফল্টভাবে মোবাইল- প্রথমে কনটেইনার অনুসন্ধান যেখানে তারা মিডিয়া অনুসন্ধান পরাজিত করে ।
হ্যাঁ - একটি সম্পূর্ণ উপাদান স্টাইলশীট খরচ ~1,000 টোকেন উপর Qwen3কোডার, মধ্যে 2,500 বেনামী / 10,000 সাবস্ক্রাইব- আপ দৈনিক পুল. Premium Claude Sonnet / GPT-5 কল প্রতি জটিল বহু উপাদান নকশা সিস্টেম জন্য উপলব্ধ.
Vercel দ্বারা v0 (বিনামূল্যে স্তর + $20/মাস প্রো) React + Tailwind উপাদান উত্পাদন করে। Tailwind UI ($299 জীবনকাল) একটি বিনামূল্যে উপাদান লাইব্রেরী। কার্সর ($20/মাস) এবং Copilot ($10-39/মাস) একটি IDE এর ভিতরে সাহায্য করে। আমাদের টুল হল এক-শট CSS - একটি বর্ণনা পেস্ট করুন, ক্রস-ব্রাউজার-নিরাপদ CSS পাবেন। Tailwind এর সাথে ভালভাবে জুটি: Tailwind কনফিগারেশনে প্রাক-নির্ধারণ পরিবর্তন করুন এবং আমরা একটি tailwind.config.js + ইউটিলিটি ক্লাস লিখব কাঁচা CSS এর পরিবর্তে।
হ্যাঁ - থিমিংয়ের জন্য CSS স্বনির্বাচিত বৈশিষ্ট্য, @layer এর জন্য ক্যাস্কেড নিয়ন্ত্রণ, কন্টেইনার অনুসন্ধান (@container) যেখানে পিতামাতার সাপেক্ষে আকার পরিবর্তনের ফলে ভিউপোর্টের আকার পরিবর্তন হয়, পিতামাতা ভিত্তিক স্টাইলিংয়ের জন্য :has (), color-mix () এবং OKLCH এর মতো রঙের ফাংশন প্রবেশযোগ্য রঙের হস্তক্ষেপের জন্য। প্রয়োজনে বিনয়ীভাবে ফিরে আসে।
Tailwind কনফিগারেশন প্রাক-নির্ধারিত নির্বাচন করুন। আউটপুট হল Tailwind 3.x ইউটিলিটি ক্লাস যা আপনার tailwind.config.js-এ সংযুক্ত করা হয়েছে (যদি আপনি থিম স্বনির্বাচন করতে চান তবে আমরা এটি তৈরি করব)। এইচটিএমএল মারকিংয়ের জন্য যা ক্লাসগুলিকে আবৃত করে, /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 করুন। বহনকারীর অনুমোদন, হার-সীমিত। ডিজাইন-টোকেন পাইপলাইন অথবা উপাদান-লাইব্রেরী উৎপাদনের জন্য উপযুক্ত। /api/ এ ডকুমেন্টেশন।
১০,০০০ টোকেন এর জন্য বিনামূল্যে নিবন্ধন করুন
ফ্রি অ্যাকাউন্ট তৈরি করুনকোন ক্রেডিট কার্ডের প্রয়োজন নেই
আপনি কিভাবে এই টুলটি রেটিং করবেন?