Trying to make gradient see-through to place an image behind it
Where I am be able to place an image behind it and be able to see it.
Would the gradient be able to be written a different way where transparent would work?
How do I, or, how am I able to set background to transparent, and for that to be able to work in the code?
Would using mask-image or clip-path be able to work here to make it see-through?
or maybe a different way?
What am I supposed to do or change in my code to be able to set black to see-through and for it to work?
Right now the gradient image looks like this:
When --color-b: black; is set to transparent, I should see this image:
Example of what I am trying to achieve:
SVG Version: https://jsfiddle.net/h8q352mg/
Why is this so difficult to do?
What will work?
How do I change the black color here to see-through?
That is all I am trying to do in the code, make the black see-through.
I keep trying different things and the colors keep blending in with each other.
Does anyone on here know how to do this so that the colors don't blend in with each other?
Since the body color is green, that is the color I should see in place of the black, when black is set to transparent.
https://jsfiddle.net/e39mub8L/
:root {
--color-a: #1155cc;
--color-b: black;
--color-c: #1155cc;
--color-d: black;
}
:root {
--color-a: #1155cc;
--color-b: black;
--color-c: #1155cc;
--color-d: black;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background: green;
padding: 50px 8px;
}
.panel-left,
.panel-right {
position: fixed;
height: 100%;
width: 50%;
top: 0%;
overflow: hidden;
z-index: 0;
transform: translateX(0);
transition: transform 7s cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 1s;
}
.panel-left {
left: 0;
}
.panel-right {
right: 0;
}
.panel-left::before,
.panel-right::before {
content: "";
position: fixed;
height: 100%;
width: 200%;
top: 0;
left: 0;
background-image: linear-gradient(var(--color-a) 5px, #0000 5px),
linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
linear-gradient(
90deg,
var(--color-b) 10px,
#0000 10px 160px,
var(--color-b) 160px
),
linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
linear-gradient(
90deg,
var(--color-c) 15px,
#0000 15px 155px,
var(--color-c) 155px
),
linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
linear-gradient(
90deg,
var(--color-d) 20px,
#0000 20px 150px,
var(--color-d) 150px
),
linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
linear-gradient(
90deg,
var(--color-a) 25px,
#0000 25px 145px,
var(--color-a) 145px
),
linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
linear-gradient(
90deg,
var(--color-b) 30px,
#0000 30px 140px,
var(--color-b) 140px
),
linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
linear-gradient(
90deg,
var(--color-c) 35px,
#0000 35px 135px,
var(--color-c) 135px
),
linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
linear-gradient(
90deg,
var(--color-d) 40px,
#0000 40px 130px,
var(--color-d) 130px
),
linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
linear-gradient(
90deg,
var(--color-a) 45px,
#0000 45px 125px,
var(--color-a) 125px
),
linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
linear-gradient(
90deg,
var(--color-b) 50px,
#0000 50px 120px,
var(--color-b) 120px
),
linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
linear-gradient(
90deg,
var(--color-c) 55px,
#0000 55px 115px,
var(--color-c) 115px
),
linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
linear-gradient(
90deg,
var(--color-d) 60px,
#0000 60px 110px,
var(--color-d) 110px
),
linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
linear-gradient(
90deg,
var(--color-a) 65px,
#0000 65px 105px,
var(--color-a) 105px
),
linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
linear-gradient(
90deg,
var(--color-b) 70px,
#0000 70px 100px,
var(--color-b) 100px
),
linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
linear-gradient(
90deg,
var(--color-c) 75px,
#0000 75px 95px,
var(--color-c) 95px
),
linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
linear-gradient(
90deg,
var(--color-d) 80px,
#0000 80px 90px,
var(--color-d) 90px
),
linear-gradient(var(--color-a), var(--color-a));
background-size: 165px 165px;
}
.panel-right::before {
left: -100%;
}
.container:hover .panel-left {
transform: translateX(-100%);
}
.container:hover .panel-right {
transform: translateX(100%);
}<div class="container">
<div class="panel-left">
</div>
<div class="panel-right">
</div>
</div>Solution
This background consists of a stack of 165px solid squares, with varying sized holes in the middle. You can see this when you build it up layer by layer, starting from the end of the list which is the bottom gradient in the stack (the lowest z-index, if you like). The bottom-most layer is a solid black square. The layer above that is a solid orange square with a small hole in the centre. The layer above that is a solid blue square with a slightly larger hole in the centre.
So if you set one particular layer to transparent, that simply results in the layer beneath becoming more visible. The background never shows through any part of any square.
:root {
--color-a: black;
--color-b: red;
--color-c: blue;
--color-d: orange;
}
body {
background: #ffffcc;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
div {
width: 165px;
height: 165px;
}
.d1 {
background-image:
linear-gradient(var(--color-a), var(--color-a));
}
.d2 {
background-image:
linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
linear-gradient(
90deg,
var(--color-d) 80px,
#0000 80px 90px,
var(--color-d) 90px
),
linear-gradient(var(--color-a), var(--color-a));
}
.d3 {
background-image:
linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
linear-gradient(
90deg,
var(--color-c) 75px,
#0000 75px 95px,
var(--color-c) 95px
),
linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
linear-gradient(
90deg,
var(--color-d) 80px,
#0000 80px 90px,
var(--color-d) 90px
),
linear-gradient(var(--color-a), var(--color-a));
}
.d4 {
background-image:
linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
linear-gradient(
90deg,
var(--color-b) 70px,
#0000 70px 100px,
var(--color-b) 100px
),
linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
linear-gradient(
90deg,
var(--color-c) 75px,
#0000 75px 95px,
var(--color-c) 95px
),
linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
linear-gradient(
90deg,
var(--color-d) 80px,
#0000 80px 90px,
var(--color-d) 90px
),
linear-gradient(var(--color-a), var(--color-a));
}
.d5 {
background-image:
linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
linear-gradient(
90deg,
var(--color-a) 65px,
#0000 65px 105px,
var(--color-a) 105px
),
linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
linear-gradient(
90deg,
var(--color-b) 70px,
#0000 70px 100px,
var(--color-b) 100px
),
linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
linear-gradient(
90deg,
var(--color-c) 75px,
#0000 75px 95px,
var(--color-c) 95px
),
linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
linear-gradient(
90deg,
var(--color-d) 80px,
#0000 80px 90px,
var(--color-d) 90px
),
linear-gradient(var(--color-a), var(--color-a));
}
.d6 {
background-image:
linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
linear-gradient(
90deg,
var(--color-d) 60px,
#0000 60px 110px,
var(--color-d) 110px
),
linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
linear-gradient(
90deg,
var(--color-a) 65px,
#0000 65px 105px,
var(--color-a) 105px
),
linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
linear-gradient(
90deg,
var(--color-b) 70px,
#0000 70px 100px,
var(--color-b) 100px
),
linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
linear-gradient(
90deg,
var(--color-c) 75px,
#0000 75px 95px,
var(--color-c) 95px
),
linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
linear-gradient(
90deg,
var(--color-d) 80px,
#0000 80px 90px,
var(--color-d) 90px
),
linear-gradient(var(--color-a), var(--color-a));
}
.d7 {
background-image:
linear-gradient(var(--color-a) 5px, #0000 5px),
linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
linear-gradient(
90deg,
var(--color-b) 10px,
#0000 10px 160px,
var(--color-b) 160px
),
linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
linear-gradient(
90deg,
var(--color-c) 15px,
#0000 15px 155px,
var(--color-c) 155px
),
linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
linear-gradient(
90deg,
var(--color-d) 20px,
#0000 20px 150px,
var(--color-d) 150px
),
linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
linear-gradient(
90deg,
var(--color-a) 25px,
#0000 25px 145px,
var(--color-a) 145px
),
linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
linear-gradient(
90deg,
var(--color-d) 60px,
#0000 60px 110px,
var(--color-d) 110px
),
linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
linear-gradient(
90deg,
var(--color-a) 65px,
#0000 65px 105px,
var(--color-a) 105px
),
linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
linear-gradient(
90deg,
var(--color-b) 70px,
#0000 70px 100px,
var(--color-b) 100px
),
linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
linear-gradient(
90deg,
var(--color-c) 75px,
#0000 75px 95px,
var(--color-c) 95px
),
linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
linear-gradient(
90deg,
var(--color-d) 80px,
#0000 80px 90px,
var(--color-d) 90px
),
linear-gradient(var(--color-a), var(--color-a));
}<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
<div class="d6"></div>
<div class="d7"></div>To achieve the effect you want, you need to be able to draw concentric squares. You can’t do this using linear gradients, because they are one-dimensional. The best you can do with a linear gradient is something like this.
Radial gradients are two-dimensional, but of course they are elliptical rather than rectangular. It’s possible to simulate circles (or ellipses) using radial gradients, but it’s not possible to simulate squares.
To get the effect you want, you need to use the right tool. The right tool for drawing squares is SVG. In SVG it’s easy to create squares (rectangles) with a defined stroke (border) width and no fill.
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 165 165" width="165" height="165" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
.st0 {stroke: rgb(0, 0, 0); stroke-width: 0px; fill: rgb(17, 85, 204);}
.st1 {fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);}
</style>
</defs>
<rect x="80" y="80" width="10" height="10" class="st0"/>
<rect x="72.5" y="72.5" width="25" height="25" class="st1"/>
<rect x="62.5" y="62.5" width="45" height="45" class="st1"/>
<rect x="52.5" y="52.5" width="65" height="65" class="st1"/>
<rect x="42.5" y="42.5" width="85" height="85" class="st1"/>
<rect x="32.5" y="32.5" width="105" height="105" class="st1"/>
<rect x="22.5" y="22.5" width="125" height="125" class="st1"/>
<rect x="12.5" y="12.5" width="145" height="145" class="st1"/>
<rect x="2.5" y="2.5" width="165" height="165" class="st1"/>
</svg>
You can reference an external SVG image from your style sheet, or you can encode it into a data URL which can then be embedded into your style sheet. Run this snippet for the final result.
body {
margin: 1em;
background: green;
display: flex;
justify-content: center;
}
.d1 {
width: 335px;
height: 335px;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 165 165' width='165' height='165' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cstyle%3E .st0 %7Bstroke: rgb(0, 0, 0); stroke-width: 0px; fill: rgb(17, 85, 204);%7D .st1 %7Bfill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);%7D %3C/style%3E%3C/defs%3E%3Crect x='80' y='80' width='10' height='10' class='st0'/%3E%3Crect x='72.5' y='72.5' width='25' height='25' class='st1'/%3E%3Crect x='62.5' y='62.5' width='45' height='45' class='st1'/%3E%3Crect x='52.5' y='52.5' width='65' height='65' class='st1'/%3E%3Crect x='42.5' y='42.5' width='85' height='85' class='st1'/%3E%3Crect x='32.5' y='32.5' width='105' height='105' class='st1'/%3E%3Crect x='22.5' y='22.5' width='125' height='125' class='st1'/%3E%3Crect x='12.5' y='12.5' width='145' height='145' class='st1'/%3E%3Crect x='2.5' y='2.5' width='165' height='165' class='st1'/%3E%3C/svg%3E");
}<div class="d1"></div>- Why anchor tag does not take height and width of its containing element
- Add <style> element to an HTML using Python Dominate library
- how to remove blue background on chrome autocomplete
- How do I use variable fonts with Google Fonts?
- JS manipulates the DOM, then CSS doesn't load properly on refresh, even though cache is disabled
- Align section heading with the first content item instead of centering in Flexbox layout
- Get rid of spaces between spans
- Remove button when logged in (wordpress)
- Is border-image possible in Tailwind?
- How to strike through obliquely with css
- CSS cross through an element
- Is pop-out effect using blob svg achievable?
- How to set borders between children from parent in CSS?
- Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading
- How do CSS triangles work?
- Making planets follow their orbit in HTML/CSS
- How to make row scroll (overflow) on x axis when reach max width
- Why is CSS flex not working when deployed?
- Radial progress bar using TailwindUI
- Column of h2 elements takes width of the biggest, how to prevent?
- HTML5 and CSS grid - Can't get it to fit the content
- How to disable scroll without hiding it?
- Tailwind CSS "justify-center" works if used with "flex-row" but doesnt work with "flex-col"
- How can I change the color of an 'svg' element?
- How to control website tinting in Safari 15
- How do you prevent header tags from stretching across the body width
- Dark mode flickers a white background for a millisecond on reload
- How can I set "cursor: pointer" on Vuetify v-data-table rows? (expanded item area excluded)
- How can I inspect the shadow DOM of native controls in Chrome developer tools?
- 100vh height when address bar is shown - Chrome Mobile