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>
Related
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>
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
I've seen a million people do it, but I haven't been able to get it to work.
background: -webkit-linear-gradient(left top, black, #333333 85%, gray), url('/img/helix.png');
I've tried with the order reversed and with background-image, still nothing.
I saw one person use:
body:before {
content: " ";
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
background: -webkit-linear-gradient(left top, black, #333333 85%, gray);
}
But there has to be a better way...
Updated code:
In an ID for the image div:
height: 100%;
width: 100%;
background: transparent url('/img/helix-white.png') no-repeat;
In the CSS for the body element:
background: -webkit-linear-gradient(left top, black, #333333 85%, gray);
background: -moz-linear-gradient(left top, black, #333333 85%, gray);
background: -ms-linear-gradient(left top, black, #333333 85%, gray);
background: -o-linear-gradient(left top, black, #333333 85%, gray);
background: linear-gradient(left top, black, #333333 85%, gray);
Update 2:
I used a div with the image in it with CSS for positioning:
<div id="backgroundImage">
<img src="img/helix-white.png" alt=" " />
</div>
#backgroundImage
{
position: fixed;
bottom: 10%;
left: 7%;
opacity:0.4;
filter:alpha(opacity=40);
-webkit-transform: rotateZ(20deg);
-moz-transform: rotateZ(20deg);
-ms-transform: rotateZ(20deg);
-o-transform: rotateZ(20deg);
transform: rotateZ(20deg);
}
And in the body CSS for the gradient:
height: 100%;
background: -webkit-linear-gradient(left top, black, #333333 85%, gray);
background: -moz-linear-gradient(left top, black, #333333 85%, gray);
background: -ms-linear-gradient(left top, black, #333333 85%, gray);
background: -o-linear-gradient(left top, black, #333333 85%, gray);
background: linear-gradient(left top, black, #333333 85%, gray);
Why not have a div with the background gradient then another div inside with a background image. If the background image is a .png with transparency or doesn't fill the div, you'll be able to see the gradient behind it.
e.g.
<div id="gradient">
<div id="image">
Your content here.
</div>
</div>
CSS
#gradient {
background: -webkit-linear-gradient(left top, black, #333333 85%, gray); }
#image {
background: transparent url('your image here') center center no-repeat; }
On another note, you should use a full range of gradient options to support all browsers (not just webkit). I'd recommend using a CSS3 gradient generator for the code:
http://www.colorzilla.com/gradient-editor/
as mentioned, be sure you're checking your stuff in either Safari or an older version of Chrome. They both use(d) webkit as the rendering engine.
I have a repeating linear gradient like so:
.placeholder {
background: repeating-linear-gradient(to top right, #7722AA 0px, #7722AA 6%, #CC44EE 6%, #CC44EE 13%) transparent;
border: 1px solid #000000;
float: left;
height: 110px;
width: 120px;
}
However in chrome, firefox on Mac and opera the appearance is skewed:
It works fine when in a square, but when it becomes a rectangle it becomes jagged - the same doesn't occur in all other browsers.
What causes this?
jsfiddle
Maybe you want:
.placeholder {
background: repeating-linear-gradient(45deg, #7722AA 0px, #7722AA 6%, #CC44EE 6%, #CC44EE 13%) transparent;
border: 1px solid #000000;
float: left;
height: 110px;
width: 120px;
}
?
One approach is to spread out your gradient a bit more. Adding a 2% gradient transition to either side of the stripe gives a slight blur that obscures the jaggies without eliminating the edge.
repeating-linear-gradient(to top right, #CC44EE 0px, #7722AA 2%, #7722AA 7%, #CC44EE 9%, #CC44EE 14%) transparent
http://jsfiddle.net/mblase75/FrT6Y/
To increase the blur along the stripe edge, increase the 2% to 3% or more and then decrease the 7% to 6% or more to keep the stripes the same size:
repeating-linear-gradient(to top right, #CC44EE 0px, #7722AA 3%, #7722AA 6%, #CC44EE 9%, #CC44EE 14%) transparent
http://jsfiddle.net/mblase75/FrT6Y/5/