← Back to CSS Course | Chapter 2: Colors & Backgrounds | Lesson 15 of 21

CSS Background Clip

background-clip तय करता है कि background कहाँ जाकर कट जाता है और visible होना बंद कर देता है, और इसकी सबसे मशहूर trick किसी gradient को सिर्फ text के shape तक clip करना है।

In this page:

  1. Standard Clip Values
  2. Practice में Border-Box बनाम Padding-Box
  3. text Value: Gradient Text
  4. Gradient Text के लिए Requirements
  5. Clip बनाम Origin: अलग-अलग काम
Syntax
css 
selector {
  background-clip: border-box | padding-box | content-box | text;
}

Standard Clip Values

background-clip: border-box (default) background को border area के नीचे तक paint होने देता है; padding-box background को border के अंदरूनी edge पर रोक देता है, इसलिए एक visible border background को cover करने के बजाय उसके through दिखता है; content-box background को सिर्फ content area तक clip करता है, इसे border और padding दोनों के नीचे छुपाकर।

Note:
  • Accepted values:
  • border-box — border के नीचे तक फैलता है (default)
  • padding-box — padding edge पर रुक जाता है
  • content-box — content edge पर रुक जाता है
  • text — background को text shape तक clip करता है
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: The Standard Clip Values

css 
<style>
.box {
  border: 10px dashed rgba(0,0,0,0.3);
  padding: 15px;
  background: orange;
  background-clip: content-box;
}
</style>
<div class="box">Clipped to just the content area</div>

Practice में Border-Box बनाम Padding-Box

एक semi-transparent या dashed border के साथ, border-box background color/image को border के gaps से दिखने देता है, जबकि padding-box background को border के बिल्कुल पीछे रखता है, जिससे उस region में सिर्फ border का अपना color ही visible होता है।

Note:
  • Accepted values:
  • border-box — outer border edge तक painted (initial value)
  • padding-box — सिर्फ padding edge तक painted
  • content-box — सिर्फ content के पीछे painted
  • text — सिर्फ text glyphs के पीछे painted
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Border-Box vs Padding-Box in Practice

css 
<style>
.border-box {
  border: 10px dashed rgba(0,0,0,0.3);
  background: orange;
  background-clip: border-box;
}
.padding-box {
  border: 10px dashed rgba(0,0,0,0.3);
  background: orange;
  background-clip: padding-box;
}
</style>
<div class="border-box">border-box: shows through the dashed gaps</div>
<div class="padding-box">padding-box: stays behind the border</div>

text Value: Gradient Text

background-clip: text (एक transparent text color के साथ जोड़ा गया, आमतौर पर -webkit-text-fill-color या color: transparent के ज़रिए) background को text glyphs के exact shape तक clip करता है, जिससे एक gradient या image text की fill के रूप में दिखे -- यह gradient-colored headings बनाने की standard technique है।

Note:
  • Accepted values:
  • border-box — outer border edge तक painted (initial value)
  • padding-box — सिर्फ padding edge तक painted
  • content-box — सिर्फ content के पीछे painted
  • text — सिर्फ text glyphs के पीछे painted
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: The text Value: Gradient Text

css 
<style>
h1 {
  background: linear-gradient(90deg, purple, orange);
  background-clip: text;
  color: transparent;
}
</style>
<h1>Gradient Heading</h1>

Gradient Text के लिए Requirements

text value को element की अपनी text color transparent होनी चाहिए (ताकि solid text color के बजाय background दिखे) और, कुछ browsers में, पूरी compatibility के लिए standard property के साथ-साथ prefixed -webkit-background-clip: text form भी चाहिए।

उदाहरण: Requirements for Gradient Text

css 
<style>
h1 {
  background: linear-gradient(90deg, red, blue);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
</style>
<h1>Prefixed for full compatibility</h1>

Clip बनाम Origin: अलग-अलग काम

background-clip control करता है कि background कहाँ invisible हो जाता है (boundary); background-origin control करता है कि किसी positioned image के coordinates कहाँ से measure होना शुरू करते हैं -- इन्हें independently set किया जा सकता है और ये अलग-अलग layout समस्याएँ solve करते हैं भले ही दोनों एक ही तीन box regions को reference करते हों।

उदाहरण: Clip vs Origin: Different Jobs

css 
<style>
.box {
  border: 10px dashed black;
  padding: 10px;
  background-image: url('https://placehold.co/80x80');
  background-origin: content-box;
  background-clip: padding-box;
}
</style>
<div class="box">Origin measures position, clip cuts the visible boundary</div>
Live Example
Related Topics

CSS Clip Path · CSS Background Origin · CSS Background Size · CSS Background Shorthand

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. text को transparent बनाए बिना background-clip: text इस्तेमाल करना, जैसे color: transparent, जिससे background visible ही नहीं होता।
  2. पुराने browsers में -webkit-background-clip: text भूल जाना।
  3. बिना किसी background image या gradient के text clip इस्तेमाल करना, जिससे कुछ भी नहीं दिखता।
ब्राउज़र सपोर्ट

हर modern browser में supported: Chrome, Firefox, Safari, Edge और Opera। किसी background को text तक clip करने के लिए कुछ browsers में अभी भी -webkit-background-clip prefix चाहिए होता है।

🔒

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Background Origin Next Lesson → CSS Borders

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.