CSS gradient generator কী করে?
এই CSS gradient generator visual preview সহ linear, radial এবং conic gradient তৈরি করে। টুলে gradient type, angle, color stops, stop position, preset এবং randomize control আছে। Linear mode-এ angle slider 0-360° পর্যন্ত direction ঠিক করে। Radial mode center থেকে বাইরে ছড়ানো gradient তৈরি করে, তাই angle row লুকিয়ে যায়। Conic mode `conic-gradient(from ...deg, ...)` format ব্যবহার করে। প্রতিটি color stop-এর নিজস্ব color picker ও percentage position আছে; Add Stop বোতামে নতুন stop যোগ করা যায়, আর সর্বোচ্চ 8 stop রাখা হয়। Output অংশে সরাসরি `background: ...;` CSS rule দেখা যায়।
Color stop ও preset কীভাবে কাজ করে?
Default gradient তিনটি stop দিয়ে শুরু হয়: #6366f1, #a855f7 এবং #ec4899। Stop position 0-100% রেঞ্জে থাকে। নতুন stop যোগ করলে শেষ দুই stop-এর মাঝামাঝি অবস্থানে random color বসে। Randomize বোতাম নতুন angle ও 2-4টি random color stop তৈরি করে। Preset grid-এ Purple Dream, Sunset, Ocean, Forest, Peach, Midnight, Candy, Arctic, Mojito, Royal Blue, Mango এবং Aubergine-এর মতো ready-made styles আছে; preset বেছে নিলে type, angle এবং stops একসঙ্গে বদলায়।
CSS output কীভাবে ব্যবহার করবেন?
Copy CSS বোতাম পুরো `background: linear-gradient(...);` rule কপি করে, আর Copy Background বোতাম শুধু gradient function কপি করে। Button, card, hero background, chart decoration, badge, skeleton placeholder বা design prototype-এ এই output সরাসরি CSS-এ বসানো যায়। Linear gradient সাধারণ layout background-এর জন্য সহজ, radial gradient spotlight effect-এর জন্য ভালো, আর conic gradient progress ring, color wheel বা decorative badge-এ কাজে লাগে। Stop position খুব কাছাকাছি রাখলে hard band তৈরি হতে পারে; smooth transition চাইলে stop spacing ছড়িয়ে দিন।
সতর্কতা
Gradient দেখতে আকর্ষণীয় হলেও text readability কমিয়ে দিতে পারে। gradient background-এর ওপর text রাখলে contrast বিভিন্ন অংশে আলাদা হয়, তাই শুধু একটি point মেপে সিদ্ধান্ত নেবেন না। খুব saturated বা বহু stop-এর gradient UI-কে অস্থির দেখাতে পারে; form, dashboard বা data-heavy page-এ restrained palette ব্যবহার করুন। Browser support সাধারণত ভালো, কিন্তু পুরোনো email client বা PDF renderer gradient ঠিকমতো না দেখাতে পারে। Production-এ fallback solid color রাখা ভালো। Generated CSS ছোট হলেও animation বা বড় full-screen gradient low-end device-এ repaint cost বাড়াতে পারে। design handoff-এর সময় angle, type, stop color এবং position একসঙ্গে লিখুন, যাতে পরের developer একই result পুনরায় তৈরি করতে পারে।
Gradient export করার আগে stop position overlap করছে কিনা দেখুন। 0%, 50%, 100% এর মতো evenly spaced stop সাধারণত smooth দেখায়, আর 49% ও 50% এর মতো কাছাকাছি stop sharp transition তৈরি করে। Dark gradient-এর ওপর light text এবং light gradient-এর ওপর dark text পরীক্ষা করুন। CSS variable বা utility class-এ gradient রাখলে একাধিক component-এ একই style পুনরায় ব্যবহার করা সহজ হয়।
মন্তব্য