cssbackground-imagegradienttransparentlinear-gradients
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>- HTML list-style-type dash
- Show outside element part with opacity - fabric js - controlsAboveOverlay
- Setting the width depending on the height of its parent
- adding event listener to input box and checking if it's empty
- iOS 7's blurred overlay effect using CSS
- How to wrap text in a cell in a datatable?
- Overriding React bootstrap component styling
- how to set index by choosing in javascript
- Position a responsive circle in the top-right corner of the screen
- How to center an unordered list?
- Typed.js Not Working Properly Glitching Text and Double Cursor in ReactJS
- How to freeze thead section of the table
- Check if button pressed with if statement in JS
- How do I change the font-size of an <option> element within <select>?
- Why applying TailwindCSS and custom CSS classes on RadixUi is not working?
- How can I vertically align elements in a div?
- How can I center text (horizontally and vertically) inside a div block?
- How can I horizontally center an element?
- Is there a CSS selector for elements containing certain text?
- How do I use environnement variable in my CSS using nextJs to specify base color?
- HTML/CSS - Why background-color turns white when printing?
- CSS: Image Overflows
- How to Allow Grid Text to Flow to the Next Row
- Google translator cdn
- How to override css prefers-color-scheme setting
- CSS rule based on content
- HTML: Can you hide/ignore text elements from browser Find (CTRL+F)
- Deactivate body's scrolling but keep scroll bar
- Get the colour code to change svg image colour
- Resize Image with Viewport