CSS Box-Shadow জেনারেটর
নতুনপ্রিসেট ও লাইভ প্রিভিউ সহ মাল্টি-লেয়ার CSS box-shadow তৈরি করুন। CSS, value বা React স্টাইল তাৎক্ষণিক কপি করুন।
Select a layer above to edit it.
Runs entirely in your browser. Nothing is uploaded.
কোনো ট্রায়াল অ্যান্ড এরর ছাড়াই যেকোনো CSS বক্স-শ্যাডো ভিজ্যুয়ালি তৈরি করুন
এই ফ্রি CSS box-shadow জেনারেটর আপনার কোড এডিটরের ক্লান্তিকর অনুমানকে একটি লাইভ ভিজ্যুয়াল ক্যানভাসে প্রতিস্থাপিত করে। অফসেট, ব্লার, স্প্রেড এবং অপাসিটির জন্য স্লাইডার সমন্বয় করুন — প্রিভিউ এলিমেন্টে শ্যাডো রিয়েল টাইমে আপডেট হয় — এবং নিচে আপনার পছন্দের ফরম্যাটে কপি-রেডি CSS অপেক্ষা করে। কিছুই আপলোড হয় না, কোনো অ্যাকাউন্ট দরকার নেই, এবং প্রতিটি গণনা আপনার ব্রাউজারে স্থানীয়ভাবে চলে।
আটটি বিল্ট-ইন প্রিসেটের একটি থেকে বা একটি ফাঁকা লেয়ার থেকে শুরু করুন। বাস্তবসম্মত ডেপথ ইফেক্ট তৈরি করতে একাধিক শ্যাডো লেয়ার যোগ করুন, কনট্রাস্ট চেক করতে ডার্ক/লাইট ব্যাকগ্রাউন্ড টগল করুন, তারপর আপনার আউটপুট ফরম্যাট বেছে নিন: পূর্ণ CSS প্রপার্টি ডিক্লারেশন, শুধু শ্যাডো মান, বা একটি React-রেডি ক্যামেলকেস ইনলাইন স্টাইল স্ট্রিং। জেনারেটরটি সূক্ষ্ম কার্ড এলিভেশন থেকে নিউমরফিক এক্সট্রুশন থেকে নিয়ন গ্লো ইফেক্ট পর্যন্ত সবকিছু কভার করে।
box-shadow-এর ছয়টি প্যারামিটার বোঝা
Offset X ও Y এলিমেন্টের সাপেক্ষে শ্যাডো পজিশন করে — পজিটিভ X এটিকে ডানে সরায়, পজিটিভ Y নিচে সরায়। নেগেটিভ অফসেট এটিকে বাঁয়ে বা উপরে সরায়, উপর থেকে আলো পড়া শ্যাডো ইফেক্টের জন্য উপযোগী। Blur radius কিনারার নরমতা নিয়ন্ত্রণ করে: শূন্য একটি শক্ত, স্পষ্ট আউটলাইন তৈরি করে; বড় মান একটি ক্রমান্বয়ে, ছড়িয়ে যাওয়া ফেড তৈরি করে যা প্রাকৃতিক ডেপথ হিসেবে পড়া যায়। Spread radius ব্লার প্রয়োগের আগে শ্যাডো প্রসারিত বা সংকুচিত করে — বড় ব্লারসহ একটি নেগেটিভ স্প্রেড শ্যাডোকে এলিমেন্টের স্বাভাবিক ফুটপ্রিন্টের মধ্যে রাখে, বেশিরভাগ বাস্তবসম্মত কার্ড শ্যাডোর পেছনের কৌশল।
Color সাধারণত নিরপেক্ষ এলিভেশনের জন্য `rgba(0, 0, 0, 0.12)`-এর মতো একটি অর্ধ-স্বচ্ছ গাঢ় মান, বা গ্লো ইফেক্টের জন্য একটি উজ্জ্বল রঙ। অপাসিটি স্লাইডার আপনাকে কালার পিকার থেকে স্বাধীনভাবে আলফা সূক্ষ্মভাবে সমন্বয় করতে দেয়। Inset টগল শ্যাডোর দিক উল্টে দেয়, এটিকে বর্ডার বক্সের ভেতরে এঁকে অবনমিত কূপ, ইনডেন্টেড ইনপুট এবং পুশ-বাটন প্রেসড স্টেট তৈরি করে — এমন ক্ষমতা যা `filter: drop-shadow()` অনুলিপি করতে পারে না।
পেশাদার, বাস্তবসম্মত ডেপথের জন্য মাল্টি-লেয়ার শ্যাডো
একটি একক বড় শ্যাডো কৃত্রিম মনে হয় — এটি সত্যিকার আলোর বদলে একটি সাধারণ ফটোশপ ড্রপ-শ্যাডো ফিল্টারের মতো দেখায়। পেশাদার UI তিন থেকে পাঁচটি স্ট্যাকড শ্যাডো লেয়ার ব্যবহার করে যেখানে প্রতিটি প্রায় অফসেট ও ব্লার দ্বিগুণ করে অপাসিটি অর্ধেক করে। এই কৌশলটি আলো একটি উৎস থেকে শারীরিকভাবে কীভাবে ছড়ায় তা অনুকরণ করে এবং যেকোনো সাইজ বা দূরত্বে দেখলে প্রাকৃতিক মনে হয় এমন একটি শ্যাডো তৈরি করে।
এই জেনারেটর আটটি পর্যন্ত স্বাধীন লেয়ার সমর্থন করে। প্রতিটি লেয়ারের নিজস্ব অফসেট, ব্লার, স্প্রেড, রঙ, অপাসিটি এবং ইনসেট টগল আছে। প্রতিটি লেয়ারের চোখের আইকন লেয়ার না মুছেই তাৎক্ষণিক আগে/পরে তুলনার জন্য দৃশ্যমানতা টগল করতে দেয়। Deep প্রিসেট একটি তিন-লেয়ার ক্রমান্বয়ে বৃদ্ধিমান স্ট্যাক দেখায়; Floating এলিমেন্টটি পেজের ওপরে তোলা হয়েছে এমন বোঝাতে দুটি পরিপূরক লেয়ার ব্যবহার করে; Material Google Material Design-এর মাল্টি-লেয়ার এলিভেশন স্পেসিফিকেশন পুনরুৎপাদন করে।
প্রিসেট: কার্ড, ক্রিস্প, নিউমরফিক, গ্লো এবং আরও
Soft card প্রিসেট একটি প্রায়-অদৃশ্য এলিভেশন তৈরি করে — একটি সাদা কার্ডকে পেজ থেকে আলাদা করার জন্য যথেষ্ট উত্তোলন, তার কনটেন্টের সাথে প্রতিযোগিতা না করেই। Crisp একটি জিরো-ব্লার, শক্ত-কিনারার শ্যাডো দেয় যা ব্রুটালিস্ট ও রেট্রো ডিজাইন ট্রেন্ডে জনপ্রিয়। Material একটি পরিচিত অ্যান্ড্রয়েড-স্টাইল ডেপথ সিস্টেমসহ অ্যাপের জন্য Google Material Design-এর মাল্টি-লেয়ার শ্যাডো স্পেসিফিকেশন পুনরুৎপাদন করে।
Neumorphic উপরে-বাঁয়ে একটি উজ্জ্বল হাইলাইট এবং নিচে-ডানে একটি গাঢ় শ্যাডো একত্র করে একটি এলিমেন্টকে একটি মিলিত পৃষ্ঠ থেকে বের হয়ে আসা মনে করায়। Glow Blue দেখায় কীভাবে একটি জিরো-অফসেট, রঙিন শ্যাডো একটি উজ্জ্বল বাটন বা হিরো অ্যাকসেন্ট তৈরি করে — আপনার ব্র্যান্ডের সাথে মেলাতে রঙ পরিবর্তন করুন। Inset Well টেক্সট ইনপুট ও প্রেসড স্টেটের মতো অবনমিত UI এলিমেন্টের জন্য ইনসেট কৌশল দেখায়। যেকোনো প্রিসেট লোড করুন এবং আপনার ডিজাইনের প্রয়োজন অনুযায়ী স্লাইডার সমন্বয় করুন।
box-shadow বনাম filter: drop-shadow বনাম Figma শ্যাডো — কোনটি ব্যবহার করবেন?
box-shadow এলিমেন্টের রেক্টাঙ্গুলার বর্ডার বক্স টার্গেট করে। filter: drop-shadow() এলিমেন্টের আলফা চ্যানেল সিলুয়েট ট্রেস করে — স্বচ্ছ PNG কাটআউট বা SVG আইকনের জন্য সঠিক কিন্তু ইনসেট সাপোর্ট, স্প্রেড রেডিয়াস এবং মাল্টি-লেয়ার স্ট্যাকিংয়ের অভাব রয়েছে। প্রতিটি স্ট্যান্ডার্ড UI এলিমেন্টের জন্য (কার্ড, বাটন, মোডাল, প্যানেল), `box-shadow` সঠিক টুল।
Figma এবং Adobe XD উভয়ই শ্যাডো ডিজাইন প্যানেল অফার করে, কিন্তু তাদের আউটপুট ডিজাইন টুলের মান — CSS-এর সাথে হাতে রূপান্তর ছাড়া সবসময় সামঞ্জস্যপূর্ণ নয়। এই জেনারেটর সরাসরি বৈধ, প্রোডাকশন-রেডি CSS তৈরি করে, রূপান্তর ধাপটি বাদ দিয়ে। Figma-এর সীমিত ফ্রি টিয়ার বা Adobe XD-এর সাবস্ক্রিপশন মডেলের বিপরীতে, UtiloKit সম্পূর্ণ ফ্রি, কোনো ইনস্টলেশন ছাড়াই যেকোনো ব্রাউজারে চলে, এবং একটি ডিজাইন টুল অ্যাকাউন্ট ছাড়াই একাধিক আউটপুট ফরম্যাট (CSS, মান, React) তৈরি করে।
পারফরম্যান্স, প্রাইভেসি এবং তিনটি কপি ফরম্যাট
একটি স্ট্যাটিক `box-shadow` একবার পেইন্ট করা হয় এবং সস্তায় কম্পোজিট করা হয় — বেশিরভাগ UI-এর জন্য কোনো পারফরম্যান্স উদ্বেগ নেই। সরাসরি এটি অ্যানিমেট করলে প্রতি ফ্রেমে একটি রিপেইন্ট ট্রিগার হয়। পারফরম্যান্ট বিকল্প: গন্তব্য শ্যাডো ইতিমধ্যে প্রয়োগ করা একটি `::after` সিউডো-এলিমেন্ট যোগ করুন, তারপর সেই এলিমেন্টে `transition: opacity` করুন। GPU শ্যাডো রিপেইন্ট না করেই অপাসিটি কম্পোজিট করে, শূন্য রিপেইন্ট খরচে একটি মসৃণ অ্যানিমেশন দেয়।
আপনার শ্যাডো ডায়াল করার পর, আপনার প্রজেক্টের প্রয়োজনীয় ফরম্যাটে কপি করুন: স্টাইলশিটের জন্য CSS প্রপার্টি, CSS ভ্যারিয়েবল বা SCSS ম্যাপের জন্য শুধু মান, বা JSX `style` প্রপস এবং Styled Components-এর জন্য React ইনলাইন স্টাইল। আপনার কনফিগারেশন কখনও কোনো সার্ভারে সংরক্ষিত বা কোথাও পাঠানো হয় না — ট্যাব বন্ধ করুন এবং এটি চলে যায়। পেজটি বুকমার্ক করুন এবং যখনই একটি শ্যাডো ডিজাইনে পুনরাবৃত্তি করার প্রয়োজন হয় তখন ফিরে আসুন।
ডেস্কটপ, আইফোন, অ্যান্ড্রয়েড এবং প্রতিটি আধুনিক ব্রাউজারে কাজ করে
বক্স-শ্যাডো জেনারেটর সম্পূর্ণ রেসপন্সিভ এবং একটি আধুনিক ব্রাউজারসহ যেকোনো ডিভাইসে কাজ করে। ডেস্কটপে, আপনি একটি তিন-কলাম লেআউট পান বাঁদিকে লেয়ার স্ট্যাক, মাঝখানে লাইভ প্রিভিউ, এবং ডানদিকে জেনারেট করা কোডসহ। আইফোন ও অ্যান্ড্রয়েডে, লেআউট টাচ-অপ্টিমাইজড স্লাইডার এবং কালার পিকারসহ একটি উলম্ব স্ট্যাকে ভাঁজ হয় যা নেটিভ সিস্টেম কালার পিকার ব্যবহার করে।
সব কপি বাটন Safari 13.1+, Chrome 66+, Firefox 90+ এবং Edge 79+ দ্বারা সমর্থিত Web Clipboard API ব্যবহার করে — অর্থাৎ কোনো ওয়ার্কঅ্যারাউন্ড ছাড়াই আধুনিক মোবাইল ব্রাউজারে কপি ফাংশনালিটি কাজ করে। কোনো অ্যাপ ডাউনলোড নেই, অ্যাকাউন্ট তৈরির দরকার নেই, রেট লিমিট নেই। যেকোনো ডিভাইসে URL খুলুন এবং সাথে সাথে ডিজাইন শুরু করুন।
CSS box-shadow পাঁচ-মান সিনট্যাক্স, সম্পূর্ণভাবে ব্যাখ্যা করা
সম্পূর্ণ box-shadow সিনট্যাক্স হলো: [inset] offset-x offset-y [blur-radius] [spread-radius] color। শুধু দুটি অফসেট এবং রঙ প্রয়োজন; ব্লার ও স্প্রেড ডিফল্ট শূন্য। Offset-X এবং offset-Y সেই CSS কো-অর্ডিনেট সিস্টেম অনুসরণ করে যার উৎপত্তি ভিউপোর্টের উপরের-বাঁ কর্নার: একটি পজিটিভ offset-x শ্যাডোকে ডানে সরায়, একটি নেগেটিভ মান বাঁয়ে; একটি পজিটিভ offset-y শ্যাডোকে নিচের দিকে সরায়, একটি নেগেটিভ মান উপরের দিকে। এর মানে 4px 8px-এ একটি শ্যাডো এলিমেন্টের নিচে ও ডানে বসে — উপরে ও বাঁয়ে একটি আলোর উৎসের কনভেনশনের সাথে মেলে।
Blur-radius নেগেটিভ হতে পারে না। শূন্যে শ্যাডোর একটি নিখুঁত শক্ত কিনারা থাকে যা এলিমেন্টের বর্ডার বক্সের সাথে আকৃতিতে একই — শূন্যের ওপরে যেকোনো মান সেই বক্সের একটি শক্ত সিলুয়েটে একটি Gaussian ব্লার প্রয়োগ করে, তাই ব্লার বাড়ানো ফেডকে প্রশস্ত ও নরম করে। Spread-radius ব্লার প্রয়োগের আগে শ্যাডো আউটলাইন প্রসারিত বা সংকুচিত করে: একটি পজিটিভ মান শ্যাডোকে এলিমেন্টের চেয়ে বড় করে, একটি নেগেটিভ মান এটিকে সংকুচিত করে। offset-x: 0, offset-y: 0, blur: 0, এবং একটি পজিটিভ স্প্রেড সেট করলে কোনো ব্লার ছাড়া একটি সামঞ্জস্যপূর্ণ শক্ত বর্ডার তৈরি হয় — `outline` বা একটি অতিরিক্ত র্যাপার এলিমেন্টের একটি দ্রুত CSS বিকল্প।
ঐচ্ছিক inset কীওয়ার্ড অফসেটের আগে বসিয়ে শ্যাডোকে একটি বাইরের ড্রপ শ্যাডো থেকে এলিমেন্টের বর্ডার বক্সের ভেতরের বিরুদ্ধে আঁকা একটি ইনার শ্যাডোতে পাল্টে দেয়। অফসেট দিক স্বজ্ঞাতভাবে উল্টে যায়: একটি পজিটিভ offset-y ইনার শ্যাডোকে উপরের কিনারা থেকে নিচে ঠেলে দেয়, উপর থেকে আলোকিত একটি অবনমিত গহ্বরের চেহারা তৈরি করে। অবশেষে, যেকোনো সংখ্যক শ্যাডো একটি কমা-সেপারেটেড লিস্ট হিসেবে স্ট্যাক করা যায়। ব্রাউজার ডিক্লারেশন অর্ডারে সেগুলো রেন্ডার করে প্রথম শ্যাডোটি ওপরে পেইন্ট করে — তাই একটি দুই-শ্যাডো নিউমরফিক নিয়মে হাইলাইট আগে আসা উচিত (ভিজ্যুয়ালি সামনে) এবং গাঢ় শ্যাডো দ্বিতীয়। এই অর্ডারিং `z-index` স্ট্যাকিংয়ের বিপরীত, যা প্রায়ই মাল্টি-লেয়ার শ্যাডোতে নতুন ডেভেলপারদের বিভ্রান্ত করে।
box-shadow বনাম filter: drop-shadow() — সঠিক টুল বেছে নেওয়া
box-shadow এবং filter: drop-shadow()-এর মধ্যে মূল পার্থক্য হলো তারা কী ছায়া দেয়। box-shadow সবসময় এলিমেন্টের রেক্টাঙ্গুলার বর্ডার বক্স — তার প্রস্থ, উচ্চতা, প্যাডিং এবং বর্ডার দ্বারা সংজ্ঞায়িত লেআউট রেক্টাঙ্গেল — ছায়া দেয়, এলিমেন্টটি ভিজ্যুয়ালি কেমন দেখায় তা নির্বিশেষে। স্বচ্ছ কর্নারসহ একটি PNG ইমেজ একটি রেক্টাঙ্গুলার শ্যাডো পায় যা সেই স্বচ্ছ এলাকা জুড়ে কাটে। বিপরীতে, filter: drop-shadow() এলিমেন্টের আলফা চ্যানেল সিলুয়েট ট্রেস করে: এটি প্রকৃত অস্বচ্ছ পিক্সেল অনুসরণ করে, তাই একটি তারকার স্বচ্ছ PNG কাটআউট একটি তারকা-আকৃতির শ্যাডো পায়, এবং কাটআউট এলাকাসহ একটি SVG তার প্রকৃত দৃশ্যমান আকৃতির চারপাশে ছায়া পায়।
পারফরম্যান্স বৈশিষ্ট্যও ভিন্ন। box-shadow ব্রাউজারের কম্পোজিটিং ধাপে সমাধান হয় এবং সাধারণত GPU-অ্যাক্সিলারেটেড: শ্যাডো একবার গণনা করা হয় এবং সস্তায় এলিমেন্টের লেয়ারের সাথে মিলিত হয়। filter: drop-shadow() একটি নতুন স্ট্যাকিং কনটেক্সট তৈরির ট্রিগার করতে পারে এবং এলিমেন্টের রেন্ডার করা কনটেন্টের ওপর একটি পিক্সেল-স্তরের আলফা-চ্যানেল পাস প্রয়োজন, যা ধীর হতে পারে — বিশেষত যখন এলিমেন্টে অনেক চাইল্ড নোড থাকে। আধুনিক ব্রাউজার (Chromium 100+, Firefox 110+, Safari 16+) `filter` অ্যাক্সিলারেশন উল্লেখযোগ্যভাবে উন্নত করেছে, কিন্তু জটিল কম্পোনেন্টে অ্যানিমেটেড শ্যাডোর জন্য, `box-shadow` কম-ঝুঁকির পছন্দ থেকে যায়।
filter: drop-shadow() শুধু তিনটি পজিশনাল মান নেয় (offset-x offset-y blur-radius) প্লাস একটি রঙ — এর স্প্রেড-রেডিয়াসের কোনো সমতুল্য নেই এবং এটি inset কীওয়ার্ড সমর্থন করে না। একাধিক ফিল্টার শ্যাডোর জন্য একই `filter` ডিক্লারেশনের ভেতরে একাধিক `drop-shadow()` ফাংশন চেইন করতে হয়, যা একটি কমা লিস্টের চেয়ে সিনট্যাক্টিকভাবে কম পরিষ্কার। ব্যবহারিক নিয়ম: প্রতিটি স্ট্যান্ডার্ড UI কম্পোনেন্টের জন্য — কার্ড, বাটন, মোডাল, টুলটিপ, প্যানেল — `box-shadow` ব্যবহার করুন, এবং `filter: drop-shadow()` শুধু অর্থপূর্ণ স্বচ্ছতাসহ ইমেজ, SVG আইকন, এবং অনিয়মিত-আকৃতির ডেকোরেটিভ এলিমেন্টের জন্য সংরক্ষিত রাখুন যেখানে রেক্টাঙ্গুলার ফলব্যাক স্পষ্টভাবে ভুল দেখাবে।
এলিভেশন সিস্টেম এবং Material Design-এর ডুয়াল-শ্যাডো পদ্ধতি
Google Material Design শ্যাডোকে একটি সম্পূর্ণ ডেকোরেটিভ প্রপার্টির বদলে একটি সিম্যান্টিক এলিভেশন সিস্টেম হিসেবে সংহিতাবদ্ধ করেছে। প্রতিটি কম্পোনেন্টের একটি বিশ্রামের এলিভেশন থাকে density-independent pixels (dp)-এ পরিমাপ করা — স্ক্রিন ডেনসিটি জুড়ে ধ্রুবক থাকা একটি ফিজিক্যাল সাইজ ইউনিট। একটি সমতল পৃষ্ঠ 0 dp-এ বসে; একটি উত্থিত বাটন 2 dp-তে থাকে এবং hover-এ 8 dp-তে ওঠে; একটি ডায়ালগ স্থায়ীভাবে 24 dp-তে বসে। এলিভেশন ইন্টারঅ্যাক্টিভিটি জানায়: যেসব এলিমেন্ট টাচ বা কার্সার hover-এ সাড়া দেয় সেগুলো সক্রিয় হলে ভিজ্যুয়ালি ওঠে, ব্যবহারকারীদের একটি স্পর্শযোগ্য সংকেত দেয় যে ইনপুট নিবন্ধিত হয়েছে অন্য যেকোনো স্টেট পরিবর্তনের আগে।
Material Design প্রতি এলিভেশন লেভেলে দুটি একযোগে box-shadow ডিক্লারেশন স্তরায়িত করে বাস্তবসম্মত শ্যাডো অর্জন করে — একটি key light-এর জন্য (পৃষ্ঠের উপরে ও সামান্য সামনে একটি দিকনির্দেশক উৎস, একটি মডারেট y-অফসেট এবং উচ্চ ব্লারসহ একটি ধারালো শ্যাডো তৈরি করে) এবং একটি ambient light-এর জন্য (সব দিক থেকে ছড়ানো আলো, ন্যূনতম অফসেট এবং একটি ছোট ব্লারসহ একটি নরম, কম-অপাসিটি শ্যাডো তৈরি করে)। উদাহরণস্বরূপ 6dp এলিভেশনে, key-light শ্যাডো আনুমানিক 0 3px 5px rgba(0,0,0,0.2) এবং ambient শ্যাডো 0 1px 18px rgba(0,0,0,0.12)। এই কম্বিনেশনটি এমনভাবে ত্রিমাত্রিক পড়ে যা কোনো একক-লেয়ার শ্যাডো মেলাতে পারে না, কারণ বাস্তব বস্তু পয়েন্ট সোর্স এবং পরিবেশগত বাউন্স উভয় দ্বারা আলোকিত হয়।
Material Design থেকে স্বাধীনভাবে, ডিজাইনার Josh Comeau দুটি পরিমার্জন জনপ্রিয় করেছেন যা যেকোনো শ্যাডো সিস্টেমে প্রযোজ্য। প্রথমত, খাঁটি rgba(0,0,0,X)-এর বদলে ব্যাকগ্রাউন্ড রঙ দিয়ে শ্যাডো টিন্ট করা: একটি উষ্ণ ক্রিম ব্যাকগ্রাউন্ডে, সামান্য উষ্ণ রঙের একটি শ্যাডো শারীরিকভাবে ভিত্তিক দেখায়, যেখানে একটি নিরপেক্ষ-ধূসর শ্যাডো আঠা লাগানো মনে হয়। দ্বিতীয়ত, স্মুথ শ্যাডো কৌশল — পাঁচ বা ছয়টি লেয়ার স্ট্যাক করা যাদের ব্লার ও অফসেট মান একটি লিনিয়ার ধাপের বদলে একটি ইজিং কার্ভ (যেমন একটি ছোট মান থেকে একটি বড় মানে কিউবিক-ইজ-ইন) অনুসরণ করে। ফলাফলটি স্কুইন্ট টেস্ট পাস করে: যেকোনো দেখার দূরত্বে এলিমেন্টের চারপাশে অন্ধকারের গ্র্যাডিয়েন্ট ব্যান্ডেড না হয়ে ক্রমাগত মনে হয়, যা পেশাদার UI-কে সাধারণ ওয়েব-অ্যাপ এলিভেশন থেকে আলাদা করে।
Frequently asked questions
CSS box-shadow কী এবং এটি কী করে?
CSS `box-shadow` প্রপার্টি একটি HTML এলিমেন্টে এক বা একাধিক শ্যাডো ইফেক্ট যোগ করে। প্রতিটি শ্যাডো ছয়টি পর্যন্ত মান দিয়ে সংজ্ঞায়িত: একটি ঐচ্ছিক `inset` কীওয়ার্ড, একটি অনুভূমিক অফসেট, একটি উলম্ব অফসেট, একটি ব্লার রেডিয়াস, একটি স্প্রেড রেডিয়াস, এবং একটি রঙ। পজিটিভ অনুভূমিক অফসেট শ্যাডোকে ডানে ঠেলে দেয়; পজিটিভ উলম্ব অফসেট এটিকে নিচে ঠেলে দেয়। একাধিক শ্যাডো কমা দিয়ে আলাদা করা হয় এবং সামনে-থেকে-পেছনে রেন্ডার হয়। কোনো ইমেজ ছাড়াই UI কম্পোনেন্টে ভিজ্যুয়াল ডেপথ, এলিভেশন হায়ারার্কি, গ্লো ইফেক্ট এবং নিউমরফিক স্টাইলিং যোগ করার প্রধান CSS মেকানিজম এটি।
সঠিক CSS box-shadow সিনট্যাক্স কী?
সম্পূর্ণ সিনট্যাক্স হলো: `box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color`। শুধু `offset-x`, `offset-y`, এবং `color` প্রয়োজন; `blur-radius` এবং `spread-radius` বাদ দিলে ডিফল্ট শূন্য, এবং `inset` ডিফল্ট বাইরের শ্যাডো। একটি সাধারণ কার্ড শ্যাডো দেখতে এমন: `box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12)`। কমা দিয়ে আলাদা করে সীমাহীন শ্যাডো স্ট্যাক করুন — তারা সামনে-থেকে-পেছনে রেন্ডার হয় (প্রথমে তালিকাভুক্তটি ওপরে)। এই জেনারেটর পূর্ণ ডিক্লারেশন `box-shadow:` প্রপার্টি নামসহ, বা শুধু মান আউটপুট করে আপনার পছন্দ অনুযায়ী।
blur-radius এবং spread-radius-এর মধ্যে পার্থক্য কী?
Blur-radius কিনারার নরমতা নিয়ন্ত্রণ করে: শূন্য এলিমেন্ট আকৃতির সাথে ঠিক মেলে এমন একটি শক্ত, স্পষ্ট কিনারা দেয়; বড় মান একটি ক্রমান্বয়ে বেশি নরম, বেশি ছড়ানো ফেড তৈরি করে। Spread-radius ব্লার প্রয়োগের আগে সম্পূর্ণ শ্যাডো বড় বা ছোট করে: পজিটিভ মান এটিকে এলিমেন্টের সীমানার বাইরে প্রসারিত করে, নেগেটিভ মান এটিকে ভেতরে সংকুচিত করে। সবচেয়ে বাস্তবসম্মত-দেখতে শ্যাডো একটি মডারেট ব্লার সামান্য নেগেটিভ স্প্রেডসহ ব্যবহার করে, শ্যাডোকে খুব বেশি না ছড়িয়ে এলিমেন্টের ফুটপ্রিন্টের কাছে রাখে। Deep এবং Floating প্রিসেটে ব্যবহৃত কৌশল এটি।
CSS-এ কীভাবে একটি ইনসেট বক্স-শ্যাডো তৈরি করব?
শ্যাডো ডিক্লারেশনের শুরুতে `inset` কীওয়ার্ড যোগ করুন: `box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.20)`। একটি ইনসেট শ্যাডো এলিমেন্টের পেছনে না দেখিয়ে বর্ডার বক্সের ভেতরে আঁকা হয়, একটি অবনমিত বা চাপা চেহারা তৈরি করে। সাধারণ ব্যবহার: ইনপুট ফিল্ড (ফোকাস ডেপথ দেখানো), টগল সুইচ ট্র্যাক, পুশ-বাটন অ্যাক্টিভ স্টেট, এবং এমবসড টেক্সট কন্টেইনার। এই জেনারেটরে প্রতিটি লেয়ারের কন্ট্রোল প্যানেলে একটি Inset টগল আছে — এটি সক্রিয় করুন এবং শ্যাডোটি সাথে সাথে প্রিভিউ এলিমেন্টের ভেতরে উল্টে যায়।
আমি কি একটি এলিমেন্টে একাধিক বক্স-শ্যাডো স্ট্যাক করতে পারি?
হ্যাঁ — CSS একটি একক এলিমেন্টে যেকোনো সংখ্যক কমা-সেপারেটেড শ্যাডো অনুমতি দেয়। তারা তালিকাভুক্ত অর্ডারে রেন্ডার হয়, প্রথম শ্যাডোটি ওপরে। একাধিক লেয়ার স্ট্যাক করা মসৃণ, বাস্তবসম্মত ডেপথের মূল কৌশল — একটি একক বড় শ্যাডো কৃত্রিম দেখায়, যখন তিন থেকে পাঁচটি ক্রমান্বয়ে বৃদ্ধিমান লেয়ার আলো শারীরিকভাবে কীভাবে ছড়ায় তা অনুকরণ করে। এই জেনারেটর আটটি পর্যন্ত স্বাধীন লেয়ার সমর্থন করে, প্রতিটির নিজস্ব অফসেট, ব্লার, স্প্রেড, রঙ, অপাসিটি এবং ইনসেট টগলসহ। একটি চোখের আইকন আপনাকে না মুছেই পৃথক লেয়ার দেখা/লুকানো দেয় দ্রুত আগে/পরে তুলনার জন্য।
আমি কীভাবে একটি নিউমরফিক শ্যাডো তৈরি করব?
নিউমরফিজম এমন একটি এলিমেন্টে দুটি বিপরীত শ্যাডো ব্যবহার করে যার ব্যাকগ্রাউন্ড রঙ পেজের সাথে মেলে: একটি উজ্জ্বল (প্রায়-সাদা) শ্যাডো উপরে-বাঁয়ে নির্দেশ করে, একটি গাঢ় (কম অপাসিটির কালো) শ্যাডো নিচে-ডানে নির্দেশ করে। এটি এলিমেন্টটিকে ব্যাকগ্রাউন্ড পৃষ্ঠ থেকে প্রসারিত মনে করায়। একটি ক্লাসিক নিউমরফিক ডিক্লারেশন: `box-shadow: -6px -6px 12px rgba(255,255,255,0.8), 6px 6px 12px rgba(0,0,0,0.15)`। বিভ্রমটি কাজ করার জন্য এলিমেন্টের ব্যাকগ্রাউন্ড ঠিক পেজ ব্যাকগ্রাউন্ডের সাথে মিলতে হবে। এই জেনারেটরের Neumorphic প্রিসেট একটি রেডি-মেড শুরুর পয়েন্ট দেয় — প্রসঙ্গে দেখতে প্রিভিউ ব্যাকগ্রাউন্ড 'Soft grey'-তে পাল্টান।
আমি কীভাবে একটি জ্বলজ্বলে বক্স-শ্যাডো ইফেক্ট তৈরি করব?
জিরো অফসেট, একটি বড় ব্লার রেডিয়াস, এবং একটি রঙিন মান ব্যবহার করুন: `box-shadow: 0px 0px 20px 4px rgba(59, 130, 246, 0.5)`। জিরো অফসেট গ্লোকে সব দিকে সমানভাবে ছড়িয়ে দেয়। একটি পজিটিভ স্প্রেড গ্লোকে এলিমেন্ট থেকে আরও দূরে ঠেলে দেয়। দুটি লেয়ার একত্র করা — একটি ছোট ব্লার ও বেশি অপাসিটির উজ্জ্বল কোরের জন্য, আরেকটি বড় ব্লার ও কম অপাসিটির অ্যাম্বিয়েন্ট হ্যালোর জন্য — আরও বিশ্বাসযোগ্য দীপ্তিময় ইফেক্ট তৈরি করে। Glow Blue প্রিসেট একটি দুই-লেয়ার পদ্ধতি দিয়ে এটি প্রদর্শন করে। কাস্টম অ্যাকসেন্ট গ্লোর জন্য যেকোনো হিউতে রঙ পাল্টান।
আমি কীভাবে একটি মসৃণ, বাস্তবসম্মত লেয়ার্ড শ্যাডো তৈরি করব?
একটি বড় শ্যাডোর বদলে, তিন থেকে পাঁচটি লেয়ার স্ট্যাক করুন যেখানে প্রতিটি প্রায় অফসেট ও ব্লার দ্বিগুণ করে অপাসিটি অর্ধেক করে: উদাহরণস্বরূপ, `0px 1px 2px rgba(0,0,0,0.06), 0px 4px 8px rgba(0,0,0,0.08), 0px 12px 24px rgba(0,0,0,0.06)`। এই কৌশলটি আলো একটি পয়েন্ট সোর্স থেকে শারীরিকভাবে কীভাবে ছড়ায় তা অনুকরণ করে এবং যেকোনো জুম লেভেল বা ডিসপ্লে রেজোলিউশনে বিশ্বাসযোগ্য থাকে। এই জেনারেটরের Deep এবং Floating প্রিসেট ঠিক এই নীতির ওপর তৈরি — তিনটি ক্রমান্বয়ে বৃদ্ধিমান লেয়ার যা যেকোনো স্কেলে প্রাকৃতিক পড়ে।
box-shadow এবং filter: drop-shadow()-এর মধ্যে পার্থক্য কী?
`box-shadow` সবসময় এলিমেন্টের রেক্টাঙ্গুলার বর্ডার বক্স অনুসরণ করে, এলিমেন্টটি ভিজ্যুয়ালি কেমন দেখায় তা নির্বিশেষে। `filter: drop-shadow()` এলিমেন্টের প্রকৃত আলফা চ্যানেল সিলুয়েট ট্রেস করে — স্বচ্ছ PNG কাটআউট বা SVG আইকনের জন্য উপযোগী যেখানে আপনি চান শ্যাডোটি তার বাউন্ডিং রেক্টাঙ্গেলের বদলে শেপ অনুসরণ করুক। স্ট্যান্ডার্ড UI কম্পোনেন্টের জন্য (কার্ড, বাটন, প্যানেল, ডায়ালগ), `box-shadow` সঠিক: এটি পেইন্ট করতে দ্রুত, ইনসেট মোড সমর্থন করে, স্প্রেড রেডিয়াস গ্রহণ করে, এবং একাধিক স্ট্যাকড লেয়ার অনুমতি দেয়। `filter: drop-shadow()` শুধু তখনই ব্যবহার করুন যখন এলিমেন্টের স্বচ্ছ ব্যাকগ্রাউন্ড শ্যাডো শেপের জন্য গুরুত্বপূর্ণ।
box-shadow কি CSS লেআউট বা ক্লিক এরিয়া প্রভাবিত করে?
না। `box-shadow` স্বাভাবিক লেআউট ফ্লোর বাইরে রেন্ডার করা সম্পূর্ণভাবে একটি ভিজ্যুয়াল ইফেক্ট। এটি কখনো সিবলিং এলিমেন্ট ঠেলে দেয় না, কখনো স্ক্রলযোগ্য কনটেন্ট এরিয়া বাড়ায় না, এবং এলিমেন্টের গণনাকৃত প্রস্থ, উচ্চতা, মার্জিন বা প্যাডিংয়ে কোনো প্রভাব ফেলে না। শ্যাডো এলিমেন্টের বক্সের ভিজ্যুয়ালি বাইরে প্রসারিত হয় কিন্তু লেআউট ইঞ্জিন দ্বারা উপেক্ষিত হয়। এর মানে আপনি লেআউট না ভেঙে একটি টাইট-প্যাকড গ্রিডে উদার শ্যাডো যোগ করতে পারেন — যদিও শ্যাডো ক্লিপ না হয় তা নিশ্চিত করতে প্যারেন্ট কন্টেইনারে `overflow: visible` যোগ করতে চাইতে পারেন।
React বা Tailwind ফরম্যাটে জেনারেট করা CSS কীভাবে কপি করব?
আপনার শ্যাডো তৈরি হয়ে গেলে, জেনারেটর তিনটি আউটপুট ফরম্যাট অফার করে। <strong>Copy CSS</strong> যেকোনো স্টাইলশিটের জন্য প্রস্তুত পূর্ণ প্রপার্টি ডিক্লারেশন দেয় (`box-shadow: …;`)। <strong>Copy value</strong> শুধু শ্যাডো মান দেয় — একটি SCSS ভ্যারিয়েবল, CSS কাস্টম প্রপার্টি মান, বা Tailwind `extend.boxShadow` এন্ট্রি হিসেবে উপযোগী। <strong>React style</strong> JSX ইনলাইন স্টাইল অবজেক্ট বা Styled Components-এর জন্য ক্যামেলকেস ফরম্যাট (`boxShadow: '…'`) আউটপুট দেয়। Tailwind-এর জন্য, একটি কাস্টম শ্যাডো ইউটিলিটি ক্লাস তৈরি করতে আপনার `tailwind.config.js`-এর `theme.extend.boxShadow`-এর অধীনে মানটি পেস্ট করুন।
cssgenerator.org বা css-box-shadow.com-এর চেয়ে এই বক্স-শ্যাডো জেনারেটর কি ভালো?
বেশিরভাগ ডেডিকেটেড বক্স-শ্যাডো টুল শুধু একক-লেয়ার জেনারেশন অফার করে — উদাহরণস্বরূপ cssgenerator.org বেসিক নিয়ন্ত্রণ দেয় কিন্তু কোনো প্রিসেট লাইব্রেরি বা মাল্টি-লেয়ার স্ট্যাকিং নেই। css-tricks.com-এর রেফারেন্স ডকুমেন্টেশন, একটি ইন্টারঅ্যাক্টিভ টুল নয়। cssmatic.com-এর CSS জেনারেটর কার্যকর কিন্তু পুরনো এবং বিজ্ঞাপনে ভরা। UtiloKit-এর জেনারেটর প্রতি-লেয়ার চোখের টগলসহ আটটি পর্যন্ত স্বাধীন লেয়ার সমর্থন করে, সবচেয়ে সাধারণ শ্যাডো ডিজাইন প্যাটার্ন কভার করা আটটি কিউরেটেড প্রিসেট (কার্ড, ক্রিস্প, মেটেরিয়াল, নিউমরফিক, ফ্লোটিং, ডিপ, গ্লো, ইনসেট ওয়েল), বিভিন্ন ফ্রেমওয়ার্কের জন্য তিনটি আউটপুট ফরম্যাট, এবং কনট্রাস্ট চেকিংয়ের জন্য একটি সম্পূর্ণ ডার্ক/লাইট ব্যাকগ্রাউন্ড টগল — সবকিছু বিজ্ঞাপন-মুক্ত এবং শূন্য ডেটা আপলোডসহ।
এই টুল কি মোবাইলে কাজ করে — আইফোন এবং অ্যান্ড্রয়েড?
হ্যাঁ — বক্স-শ্যাডো জেনারেটর সম্পূর্ণ রেসপন্সিভ। আইফোন ও অ্যান্ড্রয়েডে, সব স্লাইডার যথাযথ আকারের ড্র্যাগ হ্যান্ডলসহ টাচ-ফ্রেন্ডলি। লাইভ প্রিভিউ এলিমেন্ট মোবাইল স্ক্রিনে ফিট করতে স্কেল করে। কালার পিকার মোবাইল ব্রাউজারে নেটিভ সিস্টেম কালার পিকার ব্যবহার করে। থ্রি-কলাম ডেস্কটপ লেআউট সংকীর্ণ স্ক্রিনে একটি পরিষ্কার একক-কলাম উলম্ব লেআউটে ভাঁজ হয়। সব কপি বাটন Web Clipboard API ব্যবহার করে, যা iOS এবং অ্যান্ড্রয়েড উভয়ে Safari, Chrome এবং Firefox-এ সমর্থিত। কোনো অ্যাপ ডাউনলোড প্রয়োজন নেই, কোনো অ্যাকাউন্ট দরকার নেই — URL খুলুন এবং তৈরি করা শুরু করুন।
Related tools
সব টুল দেখুন
নতুন Cubic Bezier জেনারেটর
কন্ট্রোল পয়েন্ট টেনে লাইভ প্রিভিউ সহ একটি CSS easing কার্ভ ডিজাইন করুন।
নতুন Border Radius জেনারেটর
দৃশ্যত CSS গোলাকার কোণ ও জৈব blob আকৃতি তৈরি করুন।
নতুন CSS Flexbox প্লেগ্রাউন্ড
লাইভ প্রিভিউ সহ flex প্রপার্টি সমন্বয় করুন এবং CSS কপি করুন।
নতুন CSS Grid প্লেগ্রাউন্ড
লাইভ প্রিভিউ ও CSS সহ গ্রিড কলাম, gap ও অ্যালাইনমেন্ট সমন্বয় করুন।
নতুন Glassmorphism জেনারেটর
একটি ফ্রস্টেড-গ্লাস কার্ড ডিজাইন করুন এবং লাইভ প্রিভিউ সহ CSS কপি করুন।
নতুন CSS Text-Shadow জেনারেটর
লাইভ প্রিভিউ সহ একটি CSS text shadow সমন্বয় করুন এবং কোড কপি করুন।