কনিক গ্রেডিয়েন্টগুলি কিছু আকর্ষণীয় প্রভাব তৈরি করতে ব্যবহার করা যেতে পারে, যেমন এই চমৎকার সীমানা উদাহরণ।
অ্যাডাম আর্গিল দ্বারা তৈরি এই কোডপেন , মূলত টুইটারে এই টুইটের মাধ্যমে ভাগ করা হয়েছে, একটি সীমানা তৈরি করতে কীভাবে একটি কনিক গ্রেডিয়েন্ট ব্যবহার করতে হয় তা দেখায়।
.conic-gradient-border {
border: 25px solid;
border-image-slice: 1;
border-image-source: conic-gradient(
hsl(100 100% 60%),
hsl(200 100% 60%),
hsl(100 100% 60%)
);
}
টেরি মুন সৃজনশীলভাবে অ্যাডামের কোডপেনকে কাঁটাচামচ করে এই কোডপেনটি তৈরি করেন। উপাদানের উপর আপনার মাউস সরান এবং আপনি গ্রেডিয়েন্ট পরিবর্তন দেখতে পাবেন, জাভাস্ক্রিপ্ট একটি CSS কাস্টম বৈশিষ্ট্য আপডেট করার জন্য ধন্যবাদ যা ঘূর্ণন কোণ সংরক্ষণ করে।
এই উদাহরণ border-image-source সম্পত্তি ব্যবহার করে। এই বৈশিষ্ট্যটি একটি উপাদানের সীমানা তৈরি করতে ব্যবহৃত উত্স চিত্র সেট করে। অন্যান্য বৈশিষ্ট্যগুলির মতো যা একটি চিত্রের মান গ্রহণ করে, যে কোনও CSS গ্রেডিয়েন্ট প্রকারও বৈধ।