Tillitsdone
down Scroll to discover
Mastering CSS Clip-Path for Creative Web Design
Discover the power of CSS clip-path for creating unique and visually appealing designs.

Learn about basic shapes, geometry boxes, and practical use cases.
thumbnail

Introduction

The clip-path property in CSS lets you define a visible region for an element, hiding the rest. It’s great for creating unique designs without extra graphics. This article covers the basics, shapes, geometry boxes, examples, and browser compatibility.

Specification

The clip-path property is defined in these CSS specifications:

  1. CSS Masking Module Level 1:
  2. CSS Shapes Module Level 1:

Syntax and Values

The clip-path property is specified using a combination of values that define the clipping region.

Syntax

clip-path: <clip-source> | <basic-shape> | <geometry-box> | none;

Values

  1. <clip-source>:

    • A URL referencing an SVG <clipPath> element.
    clip-path: url(resources.svg#c1);
  2. <basic-shape>:

    • Defines a basic shape. If no geometry box is specified, border-box is used.
    • inset():
      • Defines an inset rectangle.
      clip-path: inset(100px 50px);
    • circle():
      • Defines a circle using a radius and a position.
      clip-path: circle(50px at 0 100px);
    • ellipse():
      • Defines an ellipse using two radii and a position.
      clip-path: ellipse(50px 60px at 0 10% 20%);
    • polygon():
      • Defines a polygon using a set of vertices.
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    • path():
      • Defines a shape using an SVG path definition.
      clip-path: path(
      "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
      );
    • rect():
      • Defines a rectangle using specified distances from the edges.
      clip-path: rect(5px 5px 160px 145px round 20%);
    • xywh():
      • Defines a rectangle using specified distances from the top and left edges, and specified width and height.
      clip-path: xywh(0 5px 100% 75% round 15% 0);
  3. <geometry-box>:

    • Defines the reference box for the basic shape.
    • margin-box: Uses the margin box.
      clip-path: margin-box;
    • border-box: Uses the border box.
      clip-path: border-box;
    • padding-box: Uses the padding box.
      clip-path: padding-box;
    • content-box: Uses the content box.
      clip-path: content-box;
    • fill-box: Uses the object bounding box (for SVG).
      clip-path: fill-box;
    • stroke-box: Uses the stroke bounding box (for SVG).
      clip-path: stroke-box;
    • view-box: Uses the nearest SVG viewport.
      clip-path: view-box;
  4. none:

    • No clipping path is created. This is the default value.
    clip-path: none;

Basic Shapes

The clip-path property lets you define various basic shapes for clipping.

Circle

Defines a circle using a radius and a position.

clip-path: circle(radius at x y);

Example:

clip-path: circle(50px at 0 100px);

Ellipse

Defines an ellipse using two radii and a position.

clip-path: ellipse(radius-x radius-y at x y);

Example:

clip-path: ellipse(50px 60px at 0 10% 20%);

Polygon

Defines a polygon using a set of vertices.

clip-path: polygon(x1 y1, x2 y2, ...);

Example:

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

Inset

Defines an inset rectangle.

clip-path: inset(top right bottom left round border-radius);

Example:

clip-path: inset(100px 50px);

Path

Defines a shape using an SVG path definition.

clip-path: path("SVG path data");

Example:

clip-path: path(
"M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);

Rect

Defines a rectangle using specified distances from the edges.

clip-path: rect(top right bottom left round border-radius);

Example:

clip-path: rect(5px 5px 160px 145px round 20%);

xywh

Defines a rectangle using specified distances from the top and left edges, and specified width and height.

clip-path: xywh(x y width height round border-radius);

Example:

clip-path: xywh(0 5px 100% 75% round 15% 0);

Geometry Boxes

The clip-path property lets you define a clipping region based on different geometry boxes. These boxes determine the reference area used for clipping.

Geometry Box Values

  1. margin-box:

    • Uses the margin box.
    clip-path: margin-box;
  2. border-box:

    • Uses the border box.
    clip-path: border-box;
  3. padding-box:

    • Uses the padding box.
    clip-path: padding-box;
  4. content-box:

    • Uses the content box.
    clip-path: content-box;
  5. fill-box:

    • Uses the object bounding box (for SVG).
    clip-path: fill-box;
  6. stroke-box:

    • Uses the stroke bounding box (for SVG).
    clip-path: stroke-box;
  7. view-box:

    • Uses the nearest SVG viewport.
    clip-path: view-box;

Combining Geometry Boxes with Basic Shapes

You can combine these geometry boxes with basic shapes to create more complex clipping effects.

Example:

clip-path: padding-box circle(50px at 0 100px);

In this example, the circle shape is applied within the padding-box of the element.

Examples and Use Cases

The clip-path property in CSS is a powerful tool for creating visually appealing designs by defining clipping regions. These regions determine which parts of an element are visible, allowing for creative and unique layouts.

Examples

1. Basic Shapes

One of the simplest and most common uses of clip-path is to clip elements into basic shapes like circles, ellipses, and polygons.

HTML:

<div class="shape circle"></div>
<div class="shape ellipse"></div>
<div class="shape polygon"></div>

CSS:

.shape {
width: 200px;
height: 200px;
background-color: #3498db;
margin: 20px;
}
.circle {
clip-path: circle(50%);
}
.ellipse {
clip-path: ellipse(50% 30% at 50% 50%);
}
.polygon {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

2. Inset Rectangles

The inset() function allows you to create inset rectangles, which can be useful for creating unique layouts.

HTML:

<div class="inset"></div>

CSS:

.inset {
width: 300px;
height: 300px;
background-color: #e74c3c;
clip-path: inset(20px 30px 40px 50px);
}

3. Clipping with SVG Paths

You can use complex SVG paths to create more intricate clipping effects.

HTML:

<div class="svg-path"></div>

CSS:

.svg-path {
width: 300px;
height: 300px;
background-color: #2ecc71;
clip-path: path("M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z");
}

4. Combining Geometry Boxes with Basic Shapes

Combining geometry boxes with basic shapes allows for more precise and customized clipping effects.

HTML:

<div class="combined-shape"></div>

CSS:

.combined-shape {
width: 300px;
height: 300px;
background-color: #9b59b6;
clip-path: padding-box circle(50px at 50% 50%);
}

Use Cases

1. Clipping Images

The clip-path property can be used to clip images into various shapes, enhancing the visual appeal of a website.

HTML:

<img src="image.jpg" alt="Clipped Image" class="clipped-image">

CSS:

.clipped-image {
width: 300px;
height: 300px;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

2. Clipping Text

Clipping text can create visually engaging typography effects.

HTML:

<p class="clipped-text">I LOVE CLIPPING</p>

CSS:

.clipped-text {
font-family: Arial, sans-serif;
font-size: 36px;
background-color: #f39c12;
color: white;
padding: 20px;
clip-path: inset(10px 20px 30px 40px);
}

Browser Compatibility

The clip-path property is widely supported across modern web browsers, making it a reliable tool for web developers. However, there are some variations in support for different features and syntax.

Compatibility Table

BrowserVersionSupported Since
Chrome55December 2016
Firefox54June 2017
Edge12July 2015
Opera42December 2016
Safari9.1March 2016

Tips for Ensuring Compatibility

  1. Use Fallbacks: To ensure compatibility across all browsers, consider using fallbacks or alternative methods for clipping effects. For example, you can use background images or other CSS properties to achieve similar visual effects.
  2. Test Across Browsers: Always test your clip-path implementations across different browsers and devices to ensure consistent rendering.
  3. Stay Up-to-Date: Keep your browser knowledge up-to-date by checking the latest compatibility tables and browser release notes.

Conclusion

The clip-path property is a powerful tool for creating visually appealing and unique designs in web development. With wide support across modern browsers, you can confidently use clip-path to enhance your web projects. By understanding the browser compatibility and implementing best practices, you can ensure that your designs are consistent and accessible to all users.

See Also

For more information on CSS properties and browser compatibility, you can refer to the following resources:

Get in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.