Search code examples
cssclip-path

Difference between the clip-path and shape-outside properties

I know that clip-path is used to create a mask on the element, but I'm not sure about the difference between clip-path and shape-outside property and if they can be used together

Solution

  • Both "create invisible layers" but for different purposes.

    clip-path: It is to "trim" an element creating a mask on top of him that covers the parts that you do not want to show. It does not affect how the elements around it float (they still have a box as reference)

    shape-outside: Create an invisible layer around the element from which the online elements around it floats (they now have a custom shape as reference). shape-outside does not cut out the element or affect how it looks.

    enter image description here Note: In this image, you can see how the text floats around the shape-outside created (the purple one)

    Both can be used in conjunction perfectly.

    css-shapes-editor is an amazing extension/tool that can help you work with both properties https://www.youtube.com/watch?v=zdWsBZiGiZc