I have a radial gradient that used as a mask-image "fades" an image in to the background-color behind the image.
mask-image: radial-gradient(ellipse at center, rgba(255,255,255,1) 1%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%);
How do I get the same effect with an evenly rectangular gradient on all four sides?
I know you can combine gradients and my most current attempt does not seem to have any effect:
img
{
mask-image:
linear-gradient(to top, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%),
linear-gradient(to right, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%),
linear-gradient(to bottom, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%),
linear-gradient(to left, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%);
}
The trick with multiple mask is to control the size/position so that each one will apply to a region of your element:
.box {
height:300px;
width:300px;
background: url(https://picsum.photos/id/1003/300/300);
-webkit-mask:
linear-gradient(to top, transparent,#fff) top /100% 20%,
linear-gradient(to bottom, transparent,#fff) bottom/100% 20%,
linear-gradient(to left , transparent,#fff) left /20% 100%,
linear-gradient(to right , transparent,#fff) right /20% 100%;
-webkit-mask-repeat:no-repeat;
mask:
linear-gradient(to top, transparent,#fff) top /100% 20%,
linear-gradient(to bottom, transparent,#fff) bottom/100% 20%,
linear-gradient(to left , transparent,#fff) left /20% 100%,
linear-gradient(to right , transparent,#fff) right /20% 100%;
mask-repeat:no-repeat;
}
body {
background:pink;
}
<div class="box"></div>
Or like this:
.box {
height:300px;
width:300px;
background: url(https://picsum.photos/id/1003/300/300);
-webkit-mask:
linear-gradient(to top, transparent 10%, #fff 15% 90%, transparent 95%),
linear-gradient(to left, transparent 10%, #fff 15% 90%, transparent 95%);
-webkit-mask-size:110% 110%;
-webkit-mask-position:center;
-webkit-mask-repeat:no-repeat;
-webkit-mask-composite: source-in;
mask:
linear-gradient(to top, transparent 10%, #fff 15% 90%, transparent 95%),
linear-gradient(to left, transparent 10%, #fff 15% 90%, transparent 95%);
mask-size: 110% 110%;
mask-position: center;
mask-repeat:no-repeat;
mask-composite: intersect;
}
body {
background:pink;
}
<div class="box"></div>
Related: How to make a rectangular transparency gradient CSS3?
Related
I'd like to have a linear gradient for my entire website using HTML/CSS - starting from one color (say red) at the beginning to another (say blue) at the end. When users request the page, they first see a blue background turning gradually to a red background as they scroll down. The website should be separated by sections, each of them filling the entire screen.
The problem is that when I separate the website with sections using 100vh, the linear gradient repeats itself for each section - instead of linearly changing over the sections.
Here is the code I have used so far:
* {
margin: 0;
padding: 0;
}
body {
background-image: -ms-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -moz-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -o-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, #202020));
background-image: -webkit-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: linear-gradient(to top, #ffffff 0%, #202020 100%);
background-repeat: no-repeat;
background-attachment: fixed;
}
section {
height: 100vh;
}
<section>
<div class="">first section</div>
</section>
<section>
<div class="">second section</div>
</section>
Any ideas on how to extend the linear gradient background over the sections?
Any help is appreciated!
This probably isn't exactly what you are after, but you might be able to achieve what you want by adjusting the gradient percentages. I have added different gradients to each section and set the background-attachment to static.
If you are after a different effect you may have to use Javascipt/jQuery.
* {
margin: 0;
padding: 0;
}
body > section:nth-child(1) {
background-image: -ms-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -moz-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -o-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, #202020));
background-image: -webkit-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: linear-gradient(to top, #ffffff 0%, #202020 100%);
}
body > section:nth-child(2) {
background-image: -ms-linear-gradient(bottom, #39a7cc 0%, #ffffff 100%);
background-image: -moz-linear-gradient(bottom, #39a7cc 0%, #ffffff 100%);
background-image: -o-linear-gradient(bottom, #39a7cc 0%, #ffffff 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #202020), color-stop(1, #ffffff));
background-image: -webkit-linear-gradient(bottom, #39a7cc 0%, #ffffff 100%);
background-image: linear-gradient(to top, #39a7cc 30%, #ffffff 100%);
}
section {
height: 100vh;
background-repeat: no-repeat;
background-attachment: static;
}
<section>
<div class="">first section</div>
</section>
<section>
<div class="">second section</div>
</section>
I want an hr that contains 50% of the page.
hr {
background-color: #E0DFDF;
background-image: -moz-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: -webkit-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: -o-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
border: none;
margin: 1.5em auto;
height: 1px;
width: 50%;
}
background-color: #border; is invalid CSS. I guess you are porting some code from preprocessor (e.g. SASS), please fix it.
Your syntax is wrong:
/* incorrect */
-webkit-linear-gradient: (left, white 0%, #E0DFDF 50%, white 100%);
^^
/* correct */
-webkit-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
Here's a demo:
hr {
background-image: -moz-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: -webkit-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: -o-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
border: none;
margin: 1.5em auto;
height: 1px;
width: 50%;
}
<hr>
Your syntax is incorrect. linear-gradient: (...) should be ---> linear-gradient(...), without the semi-colon(:).
hr {
background: -webkit-linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
background: -moz-linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
background: -o-linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
background: linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
border: 0;
margin: 1.5em auto;
height: 1px;
width: 50%;
}
<hr />
I have been looking around and trying for a few days, but i just cant seem to get it 100% right... i am trying to achieve the following effect with css3 gradient:
the closest i have gotten is DEMO:
html {
background:
linear-gradient(80deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(90deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(82deg, transparent 50%, #eee 50%, #eee),
linear-gradient(67deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(52deg, transparent 50%, #eee 50%, #eee),
linear-gradient(37deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(22deg, transparent 50%, #eee 50%, #eee),
linear-gradient(7deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(-8deg, transparent 50%, #eee 50%, #eee),
linear-gradient(-23deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(-38deg, transparent 50%, #eee 50%, #eee),
linear-gradient(-53deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(-68deg, transparent 50%, #eee 50%, #eee),
linear-gradient(-83deg, transparent 50%, #ddd 50%, #ddd);
background-position: center -100%;
background-color: #eee;
background-size: 100% 200%;
min-height: 100%;
}
I will continue attempting it.. any help is greatly Appreciated though.
Update:
There has to be a better/reusable way of doing this... looking into a scss solution, here is what i have thus far:
.sunburst {
#for $ray from 1 through 26 {
$color: #eee;
$degree: 7;
#if $ray%2 == 0 {
$color: #ddd;
}
background:linear-gradient($degree+deg, transparent 50%, $color 50%, $color),
}
}
Now its just the actual maths behind it i am trying to figure out... attempting to steal logic from pow.js, but kind of difficult if your as terrible at maths as i am...
You could use :before and :after :pseudo-elements to get this effect.
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#grad {
position: relative;
width: 100%;
height: 100%;
}
#grad:after, #grad:before {
content: '';
position: absolute;
background: linear-gradient(90deg, transparent 50%, black 50%, black), linear-gradient(82deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(67deg, transparent 50%, #000000 50%, #000000), linear-gradient(52deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(37deg, transparent 50%, #000000 50%, #000000), linear-gradient(22deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(7deg, transparent 50%, #000000 50%, #000000), linear-gradient(-8deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(-23deg, transparent 50%, #000000 50%, #000000), linear-gradient(-38deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(-53deg, transparent 50%, #000000 50%, #000000), linear-gradient(-68deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(-83deg, transparent 50%, #000000 50%, #000000), linear-gradient(-90deg, transparent 50%, #12E0DB 50%, #12E0DB);
background-position: 0% 0%;
background-size: 200% 100%;
height: 100%;
width: 50%;
}
#grad:before {
left: 50%;
transform: rotate(180deg);
}
<div id="grad"></div>
In modern chrome-based browsers there are conic gradients which do this.
div {
height:250px;
background-image:
repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg);
}
<div></div>
your background-postition is set to center -100%;. Just use
background-position: center center;
Now with this change and your provided code half of your image is already done ;). Just add the second half with more linear-gradients
#chipChocolate.py gave a brilliant solution! This is an improvement based on his.
In Firefox transparent behaves like rgba(0,0,0,0) which leaves a thin gray line at the edge. Change to rgba(255,255,255,0) looks better.
Make the visual effect closer to OP's screenshot: 36 strips, each occupies a 10 degree angle.
Effective on <html> tag, like OP's try.
BTW: Chrome's render engine sucks, best viewed in Firefox.
html {
height: 100%;
position: relative;
}
html:before, html:after {
content: '';
height: 100%;
width: 50%;
position: absolute;
top: 0;
background-size: 200% 100%;
background-image: linear-gradient(85deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(75deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(65deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(55deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(45deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(35deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(25deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(15deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(5deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(-5deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(-15deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(-25deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(-35deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(-45deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(-55deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(-65deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(-75deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(-85deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(-95deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db);
}
html:before {
left: 50%;
transform: rotate(180deg);
}
Currently, there is a repeating-conic-gradient, which creates an image consisting of a repeating gradient.
div {
height: 500px;
background: repeating-conic-gradient(
hsl(186deg 100% 50% / 31%) 0deg 15deg,
hsla(0,0%,100%,0) 0deg 30deg
) #1c2c3c
}
<div></div>
You read more about it at W3 CSS Image Values.
This property is not compatible with all browsers. Check caniuse for more information.
I am trying to make a split background from the top right corner to the bottom left corner with dynamic width... My first thought is to use gradients and color stops to split the container background and this works, however, my goal is to have the line that is created by the gradient go from corner to corner with a dynamic container width and fixed height. I have created 2 fiddle examples, how would you make the line the 2 colors create go from top right corner to bottom left corner and cut the container in half diagonally?
Here is an example from corner to corner, but the width is fixed and the container has to be square: http://jsfiddle.net/KnLmv/
.split {
height:300px;
width:300px;
color:#383634;
background-image: -webkit-gradient(linear, left top,right bottom,color-stop(0%, rgb(74,12,107)), color-stop(100%, rgb(102,153,102)));
background: -moz-linear-gradient(left top, #4a0c6b 0%, #4a0c6b 50%, #669966 50%, #669966 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#4a0c6b), color-stop(100%,#669966)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left top, #4a0c6b 0%, #4a0c6b 50%, #669966 50%, #669966 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left top, #4a0c6b 0%, #4a0c6b 50%, #669966 50%, #669966 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left top, #4a0c6b 0%, #4a0c6b 50%, #669966 50%, #669966 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a0c6b', endColorstr='#669966',GradientType=0 ); /* IE6-9 */
background: linear-gradient(lef top, #4a0c6b 0%, #4a0c6b 50%, #669966 50%, #669966 100%); /* W3C */
}
Here the same example but with a dynamic container width: http://jsfiddle.net/Lgc57/
.split {
height:300px;
width:100%;
color:#383634;
background-image: -webkit-gradient(linear, left top,right bottom,color-stop(0%, rgb(74,12,107)), color-stop(100%, rgb(102,153,102)));
background: -moz-linear-gradient(left top, #4a0c6b 0%, #4a0c6b 50%, #669966 50%, #669966 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#4a0c6b), color-stop(100%,#669966)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left top, #4a0c6b 0%, #4a0c6b 50%, #669966 50%, #669966 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left top, #4a0c6b 0%, #4a0c6b 50%, #669966 50%, #669966 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left top, #4a0c6b 0%, #4a0c6b 50%, #669966 50%, #669966 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a0c6b', endColorstr='#669966',GradientType=0 ); /* IE6-9 */
background: linear-gradient(lef top, #4a0c6b 0%, #4a0c6b 50%, #669966 50%, #669966 100%); /* W3C */
}
How can I adjust this so the second examples divider line goes corner to corner like the first example?
The code below creates diagonal lines by using CSS gradient. But how can I make the coloured line thinner about 2px, and the white space in-between larger about 7px?
body {
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.25, #fff), color-stop(0.25, #9CC), color-stop(0.5, #9CC), color-stop(0.5, #fff), color-stop(0.75, #fff), color-stop(0.75, #9CC));
background-image: -webkit-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CCb 50%, #fff 50%, #fff 75%, #9CC 75%);
background-image: -moz-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9cc 75%);
background-image: -ms-linear-gradient(right bottom, #fff 0%, #fff 25%, #bbb 25%, #bbb 50%, #fff 50%, #fff 75%, #bbb 75%);
background-image: -o-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#9CC',GradientType=0 ); / IE6-8 */
background-image: linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%);
background-size: 5px 5px;
width:100%;
height:100%;
}
You have to do it by changing the percents of the gradient to smaller or larger values, #fff = white so the range should be larger. #9CC is the blue color, its range should be smaller.
body {
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.35, #fff), color-stop(0.35, #9CC), color-stop(0.5, #9CC), color-stop(0.5, #fff), color-stop(0.85, #fff), color-stop(0.85, #9CC));
background-image: -webkit-linear-gradient(right bottom, #fff 0%, #fff 35%, #9CC 35%, #9CCb 50%, #fff 50%, #fff 85%, #9CC 85%);
background-image: -moz-linear-gradient(right bottom, #fff 0%, #fff 35%, #9CC 35%, #9CC 50%, #fff 50%, #fff 85%, #9cc 85%);
background-image: -ms-linear-gradient(right bottom, #fff 0%, #fff 35%, #bbb 35%, #bbb 50%, #fff 50%, #fff 85%, #bbb 85%);
background-image: -o-linear-gradient(right bottom, #fff 0%, #fff 35%, #9CC 35%, #9CC 50%, #fff 50%, #fff 85%, #9CC 85%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#9CC', GradientType=0);
/ IE6-8 */ background-image: linear-gradient(right bottom, #fff 0%, #fff 35%, #9CC 35%, #9CC 50%, #fff 50%, #fff 85%, #9CC 85%);
background-size: 5px 5px;
width:100%;
height:100%;
}
Demo
I changed the 25% to 35% and 75% to 80% correspondingly which lessened the range and therefore width of the blue lines and increased the range and therefore the width of the white lines
To change them yourself you may want to use a find and replace tool