IE and Edge do not seem to be able to calculate the height correctly in this gradient. Does anyone have a solution?
background: linear-gradient(180deg, rgba(255,255,255,0) 100px, #f5f5f5 100px, #f5f5f5 calc(100% - 100px), rgba(255,255,255,0) calc(100% - 100px));
In this case, as you are using a transparent "stripe", you can cheat by using two linear gradients both only going 50% of the height.
You start one from the top and the second from the bottom
div {
height: 100vh;
background:
linear-gradient(180deg, transparent 100px, #f5f5f5 100px, #f5f5f5 50%, transparent 50%),
linear-gradient(0deg, transparent 100px, #f5f5f5 100px, #f5f5f5 50%, transparent 50%);
}
body {
margin: 0;
padding: 0;
background: pink; /* for demo purposes */
}
<div></div>
Codepen Demo
Related
I'm trying to replicate the following gradient in CSS:
The best I've managed to do is:
background:
radial-gradient(ellipse at 20% 20%, #35234b 0%, transparent 70%),
radial-gradient(ellipse at 60% 20%, #2975bf 0%, transparent 70%),
radial-gradient(ellipse at 100% 20%, #3d54b1 0%, transparent 70%),
radial-gradient(ellipse at 100% 100%, #9f3c54 0%, transparent 70%),
radial-gradient(ellipse at 20% 100%, #362d6f 0%, transparent 70%);
background-blend-mode:screen;
which isn't that close:
Is it possible to get even closer to the gradient in the image? (It doesn't have to be CSS, Javascript is also valid, or even an external library. But pure CSS is preferred.)
body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
background:
radial-gradient(ellipse at 20% 20%, #35234b 0%, transparent 70%),
radial-gradient(ellipse at 60% 20%, #2975bf 0%, transparent 70%),
radial-gradient(ellipse at 100% 20%, #3d54b1 0%, transparent 70%),
radial-gradient(ellipse at 100% 100%, #9f3c54 0%, transparent 70%),
radial-gradient(ellipse at 20% 100%, #362d6f 0%, transparent 70%);
background-blend-mode:screen;
}
You were really close, start anticlockwise from the left bottom color,
and don't use mix-blend mode- to get rid of artifacts.
body {
font: 16px/1.4 sans-serif; letter-spacing: 0.12em;
min-height: 150vh;
padding: 2em;
margin: 0;
color: hsla(0, 0%, 100%, 0.85);
background-color: #170d24;
background-image:
radial-gradient(ellipse at 10% 90%, #3c2d83 0%, transparent 55%),
radial-gradient(ellipse at 90% 90%, #c33c65 0%, transparent 55%),
radial-gradient(ellipse at 90% 10%, #4a74dc 0%, transparent 55%),
radial-gradient(ellipse at 10% 10%, #35244f 0%, transparent 55%);
}
<b>ETHEREUM</b> 2.0
<h1>Your Gateway<br>into Blockchain</h1>
<p>Scroll down... and to the moon!</p>
Thanks to Temani Afif's suggestion I came up with the following. Still not exact, but way closer than before. If anyone wants to improve on this, it's very much welcome.
body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
background:linear-gradient(to right, #35234b 0% 10%,#2975bf 60% 70%,#3d54b1 80% 100%);
}
body::before{
content:""; display:block; height:100%;
background:linear-gradient(to right, #362d6f,#9f3c54);
-webkit-mask:linear-gradient(to bottom,transparent, #fff);
mask:linear-gradient(to bottom,transparent, #fff);
}
Does anyone has a solution for this css gradient?
Gradient
This is the css I use now:
background: transparent radial-gradient(closest-side at 50% 50%, #202020 0%, #202020BC 18%, #82DB563C 100%, #83DC563B 100%) 0% 0% no-repeat padding-box;
border: 1px solid #83DC56;
opacity: 1;
You an use an ellipse at top to get this kind of effect. Here's an example I made for you. You of course can play around with the colors to get it to what you want.
div {
background: transparent radial-gradient(ellipse at top, #202020 40%, #006400 100%, #39FF14 100%);
border: 1px solid #83DC56; opacity: 1;
height: 100px;
width: 700px;
}
<div></div>
I'm looking to create a gradient background for my content area. The gradient would simply be solid white, fading in from zero opacity at the top and again fading back to zero opacity at the bottom. As the content height is highly variable, relative color-stop locations don't fare well.
At the moment I have this CSS:
background: linear-gradient(
to bottom,
rgba(255,255,255,0) 0%,
rgba(255,255,255,1) 500px,
rgba(255,255,255,1) 90%,
rgba(255,255,255,0) 100%
);
I'm looking to replace the 90% with something that would equal (content height) - 500px. Is this possible and how is it done?
Thanks!
Simply use calc:
body {
min-height:1500px;
margin:0;
background: linear-gradient(
to bottom,
rgba(255,255,255,0) 0%,
rgba(255,255,255,1) 500px,
rgba(255,255,255,1) calc(100% - 500px),
rgba(255,255,255,0) 100%
);
}
html {
background:pink;
}
Or consider multiple background where you can adjust background-size/background-position
body {
min-height: 1500px;
margin: 0;
background:
/* Top part will take 500px*/
linear-gradient(to bottom, transparent, #fff) top/100% 500px,
/*Bottom part will take 500px*/
linear-gradient(to top, transparent, #fff) bottom/100% 500px,
/*Middle part will take (100% - 2*500px) */
linear-gradient(#fff,#fff) center/100% calc(100% - 1000px);
background-repeat:no-repeat;
}
html {
background: pink;
}
I am aware that you can set the width of a linear gradient using
.grey-block { background: linear-gradient(to right, #f9f9f9 0%, #f9f9f9 35%, white 35%, white 100%); }
As well as the height
.grey-block { background: linear-gradient(to bottom, #f9f9f9 0%, #f9f9f9 65%, white 65%, white 100%); }
However, is there a way you can set BOTH the height and the width using a the same css line?
To clarify, the code in the question is not setting the height and width of the gradient. It's adjusting the color stops, which results in a grey rectangle.
In order to adjust the actual dimensions of the gradient, we need to use the background-size property (as well as background-repeat) to set the height and width of the gradient.
With background-size in control of the gradient's dimensions, we can rewrite the CSS to be as follows:
.grey-block {
background-color: white;
background-image: linear-gradient(#f9f9f9, #f9f9f9);
background-size: 35% 65%;
background-repeat: no-repeat;
}
What's happening is that we're defining a "gradient" of a solid color and confining it's size. The background-repeat is disabled so that it will only render a single grey block.
.grey-block {
background-color: white;
background-image: linear-gradient(#f9f9f9, #f9f9f9);
background-size: 35% 65%;
background-repeat: no-repeat;
}
/* non-relevant styles */
body {
background-color: #222;
}
.grey-block {
height: 200px;
width: 200px;
}
<div class="grey-block"></div>
You can specify an angle. That should do the trick.
.grey-block { background: linear-gradient( 135deg, #f9f9f9 0%, #f9f9f9 65%, white 65%, white 100%); }
I want to create the background image of the attached div element with CSS (or SVG).
div.target {
background-image: linear-gradient(
to right bottom,
transparent 50%,
#00BCD4 50%
);
Background image of the div element I want to create with CSS (or SVG)
We can do this using multiple background image gradients like in the below snippet. The darker shade is assigned as the background color to the element. Then two background image layers created using gradients are placed in such a way that they produce the desired effect. Adding a partially transparent layer of white color above the darker shade will produce a lighter shade.
The background-size of the second layer should be smaller and its background-position should be at the left-bottom side of the element.
div {
height: 200px;
background-color: rgb(20,203,194);
background-image: linear-gradient(to top left, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 50%), linear-gradient(to top right, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 50%);
background-size: 100% 100%, 50px 50px;
background-position: left top, left bottom;
background-repeat: no-repeat;
}
<div></div>
Angled CSS gradients are known to produce slightly jagged (or uneven or rough) edges and that can be avoided by offsetting the color stop point a bit like in the below demo.
div {
height: 200px;
background-color: rgb(20,203,194);
background-image: linear-gradient(to top left, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) calc(50% + 1px)), linear-gradient(to top right, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) calc(50% + 1px));
background-size: 100% 100%, 50px 50px;
background-position: left top, left bottom;
background-repeat: no-repeat;
}
<div></div>
You can do this with :before and :after pseudo elements.
div {
position: relative;
width: 500px;
height: 100px;
background: #0BC7BE;
}
div:after {
position: absolute;
border-style: solid;
border-width: 0 0 100px 500px;
border-color: transparent transparent rgba(255, 255, 255, 0.3) transparent;
right: 0;
top: 0;
content: "";
}
div:before {
position: absolute;
border-style: solid;
border-width: 50px 0 0 70px;
border-color: transparent transparent transparent rgba(255, 255, 255, 0.3);
left: 0;
bottom: 0;
content: "";
}
<div></div>