सीएसएस फिल्टर जेनेरेटर

अनुकूल सीएसएस छवि फिल्टर सिर्जना गर्नुहोस् र कल्पना गर्नुहोस्

Preview

Preview Image

CSS Code

फिल्टर: कुनै पनि छैन;

फिल्टर नियन्त्रण

0px
100%
100%
0%
0deg
0%
100%
100%
0%

लोकप्रिय फिल्टर

Vintage

Vintage Filter Preview

Black & White Filter Preview

Neon Glow

Neon Glow Filter Preview

Polaroid

Polaroid Filter Preview

भिन्टेज फिल्म

Vintage Film Filter Preview

डिजिटल कला

Digital Art Filter Preview

सीएसएस फिल्टर कसरी प्रयोग गर्ने

सीएसएस फिल्टर के हो?

सीएसएस फिल्टरले तपाईँलाई ग्राफिकल प्रभावहरू जस्तै ब्लर वा रङ स्थानान्तरण तत्वमा लागू गर्न अनुमति दिन्छ। तिनीहरू सामान्यतया छविहरू, पृष्ठभूमि, र सीमाहरूको लागि प्रयोग गरिन्छ।

फिल्टरहरू दृश्य प्रभावहरू सिर्जना गर्न, छविहरू बढाउन, वा बाह्य छवि सम्पादन उपकरणहरूको आवश्यकता बिना अद्वितीय डिजाइन तत्वहरू सिर्जना गर्न प्रयोग गर्न सकिन्छ।

समर्थित सीएसएस फिल्टर गुण

  • blur()- तत्वमा गाउसियन ब्लर लागू गर्दछ।
  • brightness()- तत्वको चमक समायोजित गर्दछ।
  • contrast()- तत्वको कन्ट्रास्ट समायोजन गर्दछ।
  • grayscale()- तत्वलाई ग्रेस्केलमा रूपान्तरण गर्दछ ।
  • hue-rotate()- तत्वमा ह्यु रोटेशन लागू गर्दछ।
  • invert()- तत्वको रङ उल्टाउँछ।
  • opacity()- तत्वको अस्पष्टता समायोजन गर्दछ।
  • saturate()- तत्व को संतृप्त या विघटित करता है।
  • sepia()- तत्वलाई सेपियामा रूपान्तरण गर्दछ ।

फिल्टर कसरी लागू गर्ने

यो उपकरणद्वारा उत्पन्न सीएसएस कोड प्रयोग गरेर, तपाईं कुनै पनि एचटीएमएल तत्वमा फिल्टरहरू लागू गर्न सक्नुहुन्छ। यहाँ कसरी छ:

१. तत्व चयन गर्नुहोस्

तपाईँले फिल्टर लागू गर्न चाहनुभएको एचटीएमएल तत्व रोज्नुहोस् । यो एक छवि, पृष्ठभूमि, वा कुनै अन्य तत्व हुन सक्छ।

२. कक्षा वा आईडी थप्नुहोस्

यदि तत्वसँग पहिल्यै वर्ग वा आईडी छैन भने, सीएसएससँग लक्षित गर्न सजिलो बनाउन एउटा थप्नुहोस्।

३. फिल्टर लागू गर्नुहोस्

सीएसएस प्रयोग गर्नुहोस्filterजेनेरेटेड फिल्टर लागू गर्न तपाईँको शैलीपाना वा इनलाइन शैलीमा गुण ।

.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }

4. एकाधिक फिल्टर संयोजन गर्नुहोस्

तपाईँले बहुविध फिल्टर प्रकार्यहरू एकपछि अर्को सूचीबद्ध गरेर, खाली स्थानहरू द्वारा अलग गरेर संयोजन गर्न सक्नुहुन्छ।

filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);

ब्राउजर अनुकूलता

क्रोम, फायरफक्स, सफारी, एज र ओपेरा सहित आधुनिक ब्राउजरहरूमा सीएसएस फिल्टरहरू व्यापक रूपमा समर्थित छन्। यद्यपि, इन्टरनेट एक्सप्लोरर जस्ता पुराना ब्राउजरहरूले तिनीहरूलाई समर्थन गर्दैनन्।

Chrome Firefox Safari Edge IE 11+ (partial)

Related Tools