how to css after elements for background overlays
.banner::after, .banner::before { ...}.banner::after { opacity: .7; @supports (mix-blend-mode: hue) { opacity: 1; mix-blend-mode: color; mix-blend-mode: hard-light; mix-blend-mode: hue; }}.banner::after { ... z-index: 1;}.banner > * { z-index: 100;}<section class="banner"> <h1>Hello World</h1></section>.banner::before { transform: skew(-15deg) translateX(-50%);}.banner { overflow: hidden;}.banner::after { content: ""; // :before and :after both require content position: absolute; width: 75%; // Makes the overlay smaller to accommodate the skew height: 100%; top: 0; left: 50%; // Push the element 50% of the container's width to the right transform: skew(15deg) // Puts the element on an angle translateX(-50%); // Moves the element 50% of its width back to the left background-image: linear-gradient(120deg,#eaee44,#33d0ff);}.banner::after { /* opacity: .7; */ mix-blend-mode: color; mix-blend-mode: hue; mix-blend-mode: hard-light;}.banner::after { content: ""; // ::before and ::after both require content position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(120deg, #eaee44, #33d0ff); opacity: .7;}.banner::after, .banner::before { content: ""; position: absolute; top: 0; left: 50%; transform: skew(15deg) translateX(-50%); width: 75%; height: 100%; background-image: linear-gradient(120deg,#eaee44,#33d0ff); background-color: #333; opacity: .7;}.banner::before { transform: skew(-15deg) translateX(-50%);}.banner { overflow: hidden;}