CSS Filter স্টুডিও

প্রতিটি CSS filter function সাজান, রিঅর্ডার করুন, আর একসাথে মেশান — drop-shadow() সহ, আর glass panel-এর জন্য আলাদা একটা backdrop-filter স্ট্যাকসহ।

CSS পাঠ দেখুন

প্রিভিউ

backdrop-filter: blur(4px)

আগে / পরে

প্রিসেট

filter স্ট্যাক বদলে দেয় — পরে সম্পূর্ণ এডিটযোগ্য।

এটা যেভাবে কাজ করে

Filter function বাঁ থেকে ডানে প্রয়োগ হয়, প্রতিটা আগেরটার ফলাফলের উপর — একই function ভিন্ন অর্ডারে ভিন্ন দেখাতে পারে। grayscale() তারপর sepia() একটা সাদাকালো ছবিতে টিন্ট দেয়; sepia() তারপর grayscale() টিন্টটাই সম্পূর্ণ মুছে দেয়, কারণ grayscale() শেষে রং শূন্য করে দেয়।

filter

এলিমেন্টের নিজের উপর প্রয়োগ হয় — নিচের ছবি, কার্ড বা টেক্সট।

রঙের তীব্রতা গুণ করে। 100% অপরিবর্তিত; 0% হুবহু grayscale(100%)-এর মতো; 100%-এর উপরে oversaturate করে।

saturate150%

backdrop-filter

এলিমেন্টের পেছনে যা দেখা যাচ্ছে তার উপর প্রয়োগ হয়, এলিমেন্টের নিজের উপর নয় — এটাই একটা translucent glass panel-কে ব্যস্ত ব্যাকগ্রাউন্ডের উপরেও পড়ার যোগ্য করে তোলে। এলিমেন্টে কিছুটা transparency থাকতে হবে, নাহলে কিছুই দেখা যাবে না।

এলিমেন্টকে Gaussian-blur করে। backdrop-filter থেকে আলাদা — এটা এলিমেন্ট আর তার নিজের content/children-কে blur করে, পেছনের জিনিসকে নয়।

blur4px

আউটপুট

filter: saturate(150%);
backdrop-filter: blur(4px);