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>- Is it possible to pull css values with HTA javascript?
- Unable to make the animation function in Tailwind CSS
- CSS selector for first element with class
- Using margin:auto to vertically-align <div>
- how to change angular stepper progress color when next step active
- How to get the grid coordinates of an element using JavaScript?
- How to stop dark mode at inline css?
- Unable to make text bold in SVG
- Extend "grid-lines" beyond a CSS grid
- Show hide divs on click in HTML and CSS without jQuery
- input type color default color input as HEX
- Enable content on row hover in Blazor wasm
- Can't vertical scroll page on mobile devices with full width PrimeNg carousel
- Using custom HTML Tags
- Why is ccsnano messing up the css of bootstrap styles in gulp builder?
- Giving wrapped flexbox items vertical spacing
- force element to display outside of overflow:hidden
- How do I make the text that is inside a half capsule shape?
- Capsule shape using border-radius without a set width or height?
- Using css how so I create a pill shape which is circular on one side and angled on the other?
- How to make a pill shape button with HTML and CSS?
- Modal fixed position content shift
- Change text with a CSS3 animation?
- Changing the Style of a specific element by Checkbox:Checked
- slideDown jumps abruptly at the end
- Why doesn't CSS nesting appended nesting selector work within pseudoselectors?
- How to show empty date picker in Material UI- REACT?
- Formatting a nested table in HTML
- How can I center text (horizontally and vertically) inside a div block?
- How to use CSS files with <s:head> tag in Struts 2?