Create CSS shapes using the css clip-path property

Here are some methods to creates simple shapes with some background color, gradients, or even animated gradients using CSS clip-path property. With this method, we can create shapes such as circles, ellipse, polygon, and custom complex shapes. We can also use background images instead of a solid color for the shapes.

Here I am using a CSS clip-path maker tool to generate the CSS clip-path property. With this tool, you can create css-clip paths for 25+ predefined shapes, and modify them according to your needs. You can also create customized shapes with any number of clip points if needed.

---

Examples with Demos:

Here are three examples demonstrating CSS shape with a solid background, CSS shape with a gradient background, and CSS shape with an animating gradient background.

CSS shape with a solid background

Let us take a simple triangle shape as an example. I am using the tool to get the clip-path property. So the CSS clip-path value I got for the triangle is this:

Link to the CSS clip-path generator tool – https://tools.webdevpuneet.com/css-clip-path-generator/

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

I set up a gray ( #eaeaea) background for the page to distinguish it from the shape, and created a div with some color as a background, and added the clip-path property for the triangle shape.

DEMO

Open demo in a new window – https://demos.webdevpuneet.com/css/shapes-with-css-clip-path/

DEMO HTML

<div class="triangle">
</div>

DEMO CSS

body{
  background: #eaeaea;
}
.triangle{
  background: #6BCFFF;
  width: 250px;
  height:250px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

CSS shape with an image background

You can use an image (jpg, png, etc.) as a background. Or use the clip-path directly on the <img> image tag.

Open demo in a new window – https://demos.webdevpuneet.com/css/shapes-with-css-clip-path/image.html

DEMO

DEMO CSS

body{
  background: #eaeaea;
}
.triangle{
  background: url(https://webdevpuneet.com/wp-content/uploads/2021/05/cat1.png) no-repeat center center;
  width: 250px;
  height:250px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

CSS shape with a gradient background

To generate the background gradient, I used a CSS gradient generator tool. With this tool, you can generate linear or radial gradients with multiple colors according to your requirements.

DEMO

Open demo in a new window – https://demos.webdevpuneet.com/css/shapes-with-css-clip-path/gradient.html

DEMO CSS

body{
  background: #eaeaea;
}
.triangle{
  width: 250px;
  height:250px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.triangle {
	background-color: rgba(151, 87, 91, 1);
	/* IE9, iOS 3.2+ */
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIHN0b3AtY29sb3I9IiMwMGE1ZGYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzNlMTQ3YiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMiIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMjAwNzkiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjQiLz48c3RvcCBzdG9wLWNvbG9yPSIjZGYxMzJjIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC42Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2YzZWYxNSIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuOCIvPjxzdG9wIHN0b3AtY29sb3I9IiMwMDk4NDciIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==);
	background-image: -webkit-gradient(linear, 0% 0%, 100% 100%,color-stop(0, rgb(0, 165, 223)),color-stop(0.2, rgb(62, 20, 123)),color-stop(0.4, rgb(226, 0, 121)),color-stop(0.6, rgb(223, 19, 44)),color-stop(0.8, rgb(243, 239, 21)),color-stop(1, rgb(0, 152, 71)));
	/* Android 2.3 */
	background-image: -webkit-repeating-linear-gradient(top left,rgb(0, 165, 223) 0%,rgb(62, 20, 123) 20%,rgb(226, 0, 121) 40%,rgb(223, 19, 44) 60%,rgb(243, 239, 21) 80%,rgb(0, 152, 71) 100%);
	/* IE10+ */
	background-image: repeating-linear-gradient(to bottom right,rgb(0, 165, 223) 0%,rgb(62, 20, 123) 20%,rgb(226, 0, 121) 40%,rgb(223, 19, 44) 60%,rgb(243, 239, 21) 80%,rgb(0, 152, 71) 100%);
	background-image: -ms-repeating-linear-gradient(top left,rgb(0, 165, 223) 0%,rgb(62, 20, 123) 20%,rgb(226, 0, 121) 40%,rgb(223, 19, 44) 60%,rgb(243, 239, 21) 80%,rgb(0, 152, 71) 100%);
}

/* IE8- CSS hack */
@media \0screen\,screen\9 {
	.triangle {
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff00a5df",endColorstr="#ff009847",GradientType=0);
	}
}

CSS shape with an animating gradient background

To generate an animating gradient background, I am using this animating gradient generator tool. With this tool, you can customize the color gradients, animation direction, and animation speed according to your requirements.

DEMO

Open demo in a new window – https://demos.webdevpuneet.com/css/shapes-with-css-clip-path/animated-gradient.html

DEMO CSS

body{
  background: #eaeaea;
}
.triangle{
  background: #6BCFFF;
  width: 250px;
  height:250px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.triangle {
  animation: animateBg 14s linear infinite;
  background-image: linear-gradient(90deg,#cf5c5c,#c19b4a,#def2a0,#c6ee4a,#42eca6,#64b3d9,#208ea2,#498ada,#5b73df,#897ed3,#cf5c5c,#c19b4a);
  background-size: 1100% 100%;
}
@keyframes animateBg {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}