background-clip

background-clip обрезает фон по границам блочной модели. Самое интересное значение — text: тогда фон просвечивает сквозь буквы.

Три блока с одинаковым пунктирным бордером, но разными значениями background-clip. Видно, как фон каждый раз занимает разную площадь:

        
          
          <div class="box border-box">border-box</div><div class="box padding-box">padding-box</div><div class="box content-box">content-box</div>
          <div class="box border-box">border-box</div>
<div class="box padding-box">padding-box</div>
<div class="box content-box">content-box</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .box {  padding: 20px;  border: 10px dashed rgb(255 255 255 / 0.4);  background-color: #2E9AFF;}.border-box  { background-clip: border-box; }.padding-box { background-clip: padding-box; }.content-box { background-clip: content-box; }
          .box {
  padding: 20px;
  border: 10px dashed rgb(255 255 255 / 0.4);
  background-color: #2E9AFF;
}

.border-box  { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Каждый элемент в CSS состоит из нескольких слоёв: контент, padding, border и margin. background-clip задаёт, до какого из этих слоёв распространяется фон — дальше фон не рисуется, обрезается.

По умолчанию фон занимает весь элемент вплоть до внешнего края рамки (border-box). Это кажется логичным: хочешь зелёный блок — получаешь зелёный блок целиком. Но иногда нужно иначе, например, сделать прозрачную зону под рамкой или показать фон только там, где находится текст.

Разница между значениями хорошо видна, когда у элемента есть пунктирный или прозрачный border и заметный padding.

        
          
          .element {  background-clip: border-box;  /* значение по умолчанию */  background-clip: padding-box;  background-clip: content-box;  background-clip: text;}
          .element {
  background-clip: border-box;  /* значение по умолчанию */
  background-clip: padding-box;
  background-clip: content-box;
  background-clip: text;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Значение по умолчанию. Фон занимает всю площадь элемента, включая область под рамкой. Если рамка непрозрачная, фон под ней всё равно есть — он просто не виден.

Фон не заходит под рамку — он останавливается у её внутреннего края. При прозрачной или пунктирной рамке сквозь неё будет виден фон страницы или родительского элемента, а не фон самого блока.

Популярный приём — полупрозрачная рамка поверх цветного фона. Сквозь рамку просвечивает фон страницы, а не фон самого элемента — получается эффект двойной границы без лишних элементов:

        
          
          .card {  background-color: #F498AD;  border: 6px solid rgb(255 255 255 / 0.4);  background-clip: padding-box;}
          .card {
  background-color: #F498AD;
  border: 6px solid rgb(255 255 255 / 0.4);
  background-clip: padding-box;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

С border: 6px solid transparent зазор будет полностью прозрачным — виден только родитель.

Фон ограничен только контентной областью. Ни рамка, ни внутренние отступы не закрашиваются. При заметном padding и border вокруг фонового блока будет широкая прозрачная рамка.

Самое необычное значение: фон обрезается по форме текста. Чтобы это было видно, нужно сделать текст прозрачным через color: transparent — без этого непрозрачный текст просто перекроет фон. В результате буквы как будто «наполнены» фоновым изображением или градиентом. Популярный приём для заголовков.

Если текст переносится на несколько строк, градиент пересчитывается для каждого элемента отдельно, исходя из его background-origin-блока. Результат может быть неожиданным: вместо одного плавного перехода получится несколько коротких.

        
          
          .gradient-text {  background-image: linear-gradient(to right, #2E9AFF, #F498AD);  background-clip: text;  color: transparent;}
          .gradient-text {
  background-image: linear-gradient(to right, #2E9AFF, #F498AD);
  background-clip: text;
  color: transparent;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если у элемента несколько фоновых изображений, можно задать разное background-clip для каждого через запятую, в том же порядке, что и в background-image:

        
          
          .element {  background-image: url("pattern.png"), linear-gradient(#2E9AFF, #F498AD);  background-clip: content-box, border-box;}
          .element {
  background-image: url("pattern.png"), linear-gradient(#2E9AFF, #F498AD);
  background-clip: content-box, border-box;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 background-clip влияет только на то, где фон отрисовывается. Откуда фон начинается — это зона ответственности background-origin. Эти два свойства часто используют вместе, чтобы получить точный контроль над фоном.

💡 Сокращённое свойство background тоже принимает background-clip, но писать его там неудобно из-за длинного синтаксиса. Лучше задавать background-clip отдельно.

        
          
          /* в шорткате:  последние два <box>-значения —  это background-origin и background-clip*/.card {  background:    url("texture.png") center / cover no-repeat padding-box content-box;}/* отдельными свойствами, сразу видно что за что отвечает */.card {  background-image: url("texture.png");  background-position: center;  background-size: cover;  background-repeat: no-repeat;  background-origin: padding-box;  background-clip: content-box;}
          /* в шорткате:
  последние два <box>-значения —
  это background-origin и background-clip
*/
.card {
  background:
    url("texture.png") center / cover no-repeat padding-box content-box;
}

/* отдельными свойствами, сразу видно что за что отвечает */
.card {
  background-image: url("texture.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-clip: content-box;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .element {  padding: 20px;  border: 4px solid transparent;  background-image:    linear-gradient(#282A2E, #282A2E),    linear-gradient(135deg, #2E9AFF, #F498AD);  background-origin: padding-box, border-box;  background-clip: padding-box, border-box;}
          .element {
  padding: 20px;
  border: 4px solid transparent;
  background-image:
    linear-gradient(#282A2E, #282A2E),
    linear-gradient(135deg, #2E9AFF, #F498AD);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать