Background image clip-path color

Hey, I was wondering if there is a way to change the clip-path shape’s color. Or change the opacity. Here is my code so far.

// Header Section
.header {
  padding: 1.6em; // 16px/10px = 2em
  &__container {
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(;
    height: 100vh;
    clip-path: polygon(0 0, 95% 0, 100% 10%, 100% 100%, 5% 100%, 0 90%);


Have you tried opacity or background-color properties?

If this is what you were looking for, don’t forget to thank me :sunglasses:

<!DOCTYPE html>
/* Importing Jquery */
<script src="" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>


/* Change this to change the */
    .img-bg {
        width: 100px;
        height: 100px;
        background-color: #17c7e6;

    .img-animation {
        clip-path: circle(100%);
        transition: clip-path 1.5s ease-in-out; /* Change the numerical value to the timing */
    } {
        clip-path: circle(0%);


    <h2>The clip-path property</h2>

<!-- Creating a container for the image -->
    <div class="img-bg">
        <img class="img-animation"src=" dynamic-pattern-wallpaper-vector_53876-59131.jpg?size=338&ext=jpg" width="100px" height="100px">


<button id="glory">Change Path</button>

<!--If you don't know much about this, don't change this;-->
  let btn_class = "glory"; // Change the value according to the name of you event triggering element
  let img_class = "img-animation"; // Change this value with the id of your image
  	$("." + btn_id).click(function(){

LOL, Just realised it has been a year.