Background Clip Property in CSS

The background-clip property defines how far the background (color or image) should extend within an element.

value used for
border-box The background extends to the outside edge of the border
padding-box The background extends to the outside edge of the padding. No background is drawn beneath the border.
content-box The background is painted within the content box.
overlay In this mode, the background-color is mixed with the background-image to reflect the lightness or darkness of the backdrop.
text The background is clipped to the foreground text.

When using background-clip: text check that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.

Source Code :

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Background Clip</title>
    width: 800px;
    height: 400px;
    background-image: url('bg.jpg');
    background-size: cover;
    font-size: 100px;
    font-family: Impact;
    text-align: center;
    background-clip: text;
    -webkit-background-clip: text;
  <h2> background-clip in CSS</h2>
    Tutor Joes


Background clip
Live Preview

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects