CSS background-clip

robgmerrill's avatar
robgmerrill's avatar
robgmerrill
Published Jun 25, 2021Updated Oct 17, 2023

Defines the boundary within the element box at which the background is no longer drawn.

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Career path

    Full-Stack Engineer

    A full-stack engineer can get a project done from start to finish, back-end to front-end.
    • Includes 51 Courses
    • With Professional Certification
    • Beginner Friendly.
      150 hours

Syntax

background-clip: <value>;

Where <value> can be the following: border-box | content-box | padding-box | text | initial

Example 1

Set background to the edge of the content box:

body {
  background: #000000;
  border: 5px dashed grey;
  padding: 20px;
  background-clip: content-box;
}

Example 2

Set background to the inside edge of the border:

body {
  background: #000000;
  border: 5px dashed grey;
  padding: 20px;
  background-clip: padding-box;
}

Example 3

Set background to the edge of the border:

body {
  background: #000000;
  border: 5px dashed grey;
  padding: 20px;
  background-clip: border-box;
}

Example 4

Set background within the foreground text:

body {
  background: #000000;
  border: 5px dashed grey;
  padding: 20px;
  background-clip: text;
  color: transparent;
}

Illustration of Background-Clip

Rendered background-clip tag

All contributors

Learn CSS on Codecademy

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Career path

    Full-Stack Engineer

    A full-stack engineer can get a project done from start to finish, back-end to front-end.
    • Includes 51 Courses
    • With Professional Certification
    • Beginner Friendly.
      150 hours