Use the background-blend-mode property to set the blending mode of each background layer with CSS. You can try to run the following code to implement the background-blend-mode property and set the mode to darkenExampleLive Demo                    #myDIV {             width: 250px;             height: 170px;             background-repeat: no-repeat, repeat;             background-image:url("https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg"),url( https://www.tutorialspoint.com/latest/dc.js.png);             background-blend-mode: darken;          }                     Set Blend Mode          

To implement animation on border-bottom-right-radius property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 500px;             height: 400px;             background: yellow;             border: 10px solid yellow;             border-bottom-right-radius: 150px;             background-image:url('https://www.tutorialspoint.com/latest/electronic_measuring_instruments.png');             animation: myanim 3s infinite;             background-position: bottom left;             background-size: 50px;          }          @keyframes myanim {             20% {                background-color: maroon;                background-size: 90px;                border-bottom-color: green;                border-bottom-right-radius: 50px;             }          }                     Performing Animation bottom border right radius          

Set where to end the grid-items with CSS grid-row-start property.You can try to run the following code to implement the grid-row-end propertyExampleLive Demo                    .container {             display: grid;             grid-auto-rows: 50px;             grid-gap: 10px;             background-color: red;             padding: 10px;          }          .container>div {             background-color: yellow;             text-align: center;             padding:10px 0;             font-size: 20px;          }          .ele3 {             grid-row-end: span 2;          }                              1          2          3          4          5          6          

To implement animation on the border-bottom-left-radius property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 500px;             height: 400px;             background: yellow;             border: 10px solid green;             border-bottom-left-radius: 150px;             animation: myanim 3s infinite;             background-position: bottom left;             background-size: 50px;          }          @keyframes myanim {             20% {                background-size: 90px;                border-bottom-left-radius: 50px;             }          }                     Performing Animation for bottom border left radius          

To implement animation on the border-top-left-radius property with CSS, you can try to run the following codeExampleLive Demo                    table,th,td {             border: 2px solid black;          }          #newTable {             width: 500px;             height: 300px;             background: yellow;             border: 15px solid yellow;             animation: myanim 3s infinite;             background-position: bottom left;             background-size: 50px;          }          @keyframes myanim {             30% {                background-color: orange;                border-spacing: 50px;                border-top-color: red;                border-top-left-radius: 150px;             }          }                     Performing Animation for border top left radius                             Subject             Student             Marks                                 Maths             Amit             98                                 Science             Sachin             99                    

Use the grid-auto-columns property to set a default size for columns.You can try to run the following code to implement the grid-auto-columns property with CSSExampleLive Demo                    .container {             display: grid;             grid-auto-columns: 100px;             grid-gap: 10px;             background-color: blue;             padding: 10px;          }          .container>div {             background-color: #E5E7E9;             text-align: center;             padding:10px 0;             font-size: 20px;          }                              1          2          3          4          5          6          

Use the align-content property with value center to set the flex lines to the center.You can try to run the following code to implement the center valueExampleLive Demo                    .mycontainer {             display: flex;             height: 200px;             background-color: red;             align-content: center;             flex-wrap: wrap;          }          .mycontainer > div {             background-color: yellow;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Queue                Q1          Q2          Q3          Q4          Q5          Q6          Q7          Q8          

Use the align-content property with value space-around to add space around the flex lines.You can try to run the following code to implement the space-around valueExampleLive Demo                    .mycontainer {             display: flex;             height: 200px;             background-color: #884EA0;             align-content: space-around;             flex-wrap: wrap;          }          .mycontainer > div {             background-color: #00FF00;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Queue                Q1          Q2          Q3          Q4          Q5          Q6          Q7          Q8          

Set a linear gradient as the background image, with linear-gradient() CSS function. You can try to run the following code to implement linear-gradient() function in CSSExampleLive Demo                    #demo {             height: 200px;             background: linear-gradient(green, orange, maroon);          }                     Setting background as linear gradient.          

With grid-row property, set the size of grid items. It has grid-row-start and grid-row-end properties. You can try to run the following code to implement the CSS grid-row property.ExampleLive Demo                    .container {             display: grid;             background-color: green;             grid-template-columns: auto auto;             padding: 20px;             grid-gap: 10px;          }          .container > div {             background-color: orange;             text-align: center;             padding: 10px 0;             font-size: 20px;          }          .ele1 {             grid-row: 1 / 6;          }                     Game Board                1          2          3          4          5          6