Can anyone help me write the gradient CSS for the following image(without the text)?
This is the image:
You could use radial-gradient.
body, html {
width: 100%;
height: 100%;
margin: 0;
background: -webkit-radial-gradient(center, ellipse, #2D84A7 5%, #0D354E);
background: -moz-radial-gradient(center, ellipse, #2D84A7 5%, #0D354E);
background: radial-gradient(center, ellipse, #2D84A7 5%, #0D354E);
}
Exercise time
html, body {
height: 100%;
}
body {
margin: 0;
background: -moz-radial-gradient(circle, rgb(49, 139, 176), rgb(14, 70, 93));
background: -webkit-radial-gradient(circle, rgb(49, 139, 176), rgb(14, 70, 93));
background: radial-gradient(circle, rgb(49, 139, 176), rgb(14, 70, 93));
}
Related
Anyhow know how I can go about creating a background animation like this with CSS?
You can create two absolute html elements and align them left and right accordingly. Then you can apply CSS radial gradient on these elements for example: background: radial-gradient(45% 45% at 50% 50%, rgba(77, 230, 219, 0.2) 0%, rgba(77, 230, 219, 0) 100%); Otherwise, you can use pseudo-elements (:after, :before) instead of HTML tags.
Here is a quick sketch of what you can do:
.hero {
height: 100vh;
width: 100vw;
background-color: #000;
position: relative;
}
.hero:after,
.hero:before {
content: '';
background: radial-gradient(45% 45% at 50% 50%, rgba(77, 230, 219, 0.2) 0%, rgba(77, 230, 219, 0) 100%);
display: block;
position: absolute;
}
.hero:before {
left: -100px;
bottom: 0;
width: 300px;
height: 300px;
}
.hero:after{
right: -100px;
top: 0;
width: 300px;
height: 300px;
}
<div class="hero"></div>
To make life easier, you can use CSS Gradient Generators, such as: https://cssgradient.io/
Essentially, I want to create an element that combines a "to right" gradient with a color stop at a certain percentage and another color stop for the remaining width with a "to bottom" gradient that fades both colors to transparent. Getting the color stop part is easy, getting the fade is easy; I just can't figure out how to get both.
/*I can get this:*/
div {
width: 500px;
height: 100px;
}
.color-change {
background: linear-gradient(to right, rgb(255, 175,157) 80%, rgb(255, 95, 89) 80%);
}
/*or this:*/
.fade {
background:linear-gradient(to bottom, rgba(252, 193, 176, 0), #fcc1b0);
/* but not both*/
<div class="color-change"></div>
<div class="fade"></div>
This probably isn't hard but I can't find any examples that do exactly this. I could just use a png., but it seems as though this ought to be doable in CSS. Thanks for any suggestions (or better, solutions).
Use CSS ::before (:before)
In CSS, ::before creates a pseudo-element that is the first child of
the selected element. It is often used to add cosmetic content to an
element with the content property. It is inline by default. https://developer.mozilla.org
div {
width: 500px;
height: 100px;
}
.fade {
background: linear-gradient(to bottom, rgba(252, 193, 176, 0), #fcc1b0);
position: relative;
}
.fade::before {
display: inline-block;
content: "";
height: 100%;
width: 20%;
background: black;
position: absolute;
right: 0;
background: linear-gradient(0deg, rgba(246,115,115,1) 4%, rgba(250,192,194,1) 34%, rgba(255,233,234,1) 66%, rgba(255,255,255,1) 100%);
}
<div class="fade"></div>
Multiple background layer can do it:
.color-change {
--p:80%; /* this is your percentage */
background:
linear-gradient(to bottom, transparent, #fcc1b0) left,
linear-gradient(to bottom, transparent, rgb(255, 95, 89)) right;
background-repeat:no-repeat;
background-size:var(--p) 100%,calc(100% - var(--p)) 100%;
width: 500px;
height: 100px;
margin:10px;
}
<div class="color-change"></div>
<div class="color-change" style="--p:50%"></div>
<div class="color-change" style="--p:20%"></div>
Or you can mask it with a pseudo element. This is real transparent.
body {
background: dodgerblue;
}
div {
width: 500px;
height: 100px;
}
.color-change {
-webkit-mask: linear-gradient(to bottom, transparent, #000);
mask: linear-gradient(to bottom, transparent, #000);
position: relative;
}
.color-change:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgb(255, 175, 157) 80%, rgb(255, 95, 89) 80%);
}
<div class="color-change"></div>
I want to css code with gradient top transparent color. can you please check below is it correct.?
background-color: transparent;
background-image: linear-gradient(to top, #f2f2f2, rgba(242, 242, 242, 0));
bottom: 0;
content: " ";
display: block;
height: 150px;
position: absolute;
width: 100%;
z-index: 8;
I suggest you to use just background property for your purpose if i undetstood it correctly.
.example {
background: linear-gradient(to top, #f2f2f2, rgba(242, 242, 242, 0));
}
Cause you use second color with opacity: 0 (last parameter in the rgba function) you'll have gradient effect to transparent.
The following snippet perfectly works on Chrome: the background image fades into to the background behind towards the bottom.
div {
width: 200px;
height: 200px;
background-image: url("http://i.imgur.com/wcDxIZG.jpg");
background-size: cover;
background-position: center center;
-webkit-mask-image: linear-gradient(black, black, transparent);
mask-image: linear-gradient(black, black, transparent);
}
<div></div>
But it doesn't work on Firefox, the value is said to be incorrect.
Why ? And how can I fix that ?
Note that I know how to use another div as overlay, which isn't a general solution to me as it has too many consequences on content and element position. The only answers I'm interested in are the ones which fix the background of the div.
I don't know why, but you can replicate the effect by using the :after property for this, and this works for all browsers - even our old friend IE:
.container {
height: 200px;
overflow: hidden;
position: relative;
}
.image {
width: 200px;
height: 200px;
background-image: url("http://i.imgur.com/wcDxIZG.jpg");
background-size: cover;
background-position: center center;
}
.image:after {
content: '';
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FAFAFA', endColorstr='#FAFAFA');
background-image: -webkit-linear-gradient(top, rgba(248, 244, 243, 0) 0%, #fafafa 100%);
background-image: -ms-linear-gradient(top, rgba(248, 244, 243, 0) 0%, #fafafa 100%);
background-image: linear-gradient(to bottom, rgba(2248, 244, 243, 0) 0%, #fafafa 100%);
display: block;
position: absolute;
pointer-event: none;
bottom: 0;
left: 0;
width: 200px;
height: 20%;
}
<div class="container">
<div class="image"></div>
</div>
Starting from Firefox 53 (released April 19, 2017) , this is now possible as the support of masking images has been completed.
See http://caniuse.com/#search=mask
I have a div which sits in another div which I am trying to color the background of and have it be about 50% of the solid color #0F7BD5, and then blur into a more transparent version of that color. I have come up with this CSS but it's showing a sharp edge instead of the blur / fading effect that I'm trying to create. This is the CSS that I've come up with:
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
-webkit-background-background-image: -webkit-linear-gradient(-180deg, #0F7BD5 0, rgba(15,123,213,0.7) 40%, rgba(15,123,213,0.6) 45%, rgba(15,123,213,0.52) 50%, rgba(15,123,213,0.4) 55%, rgba(15,123,213,0.3) 59%, rgba(15,123,213,0.2) 63%, rgba(15,123,213,0.15) 100%);
background-image: -moz-linear-gradient(270deg, #0F7BD5 0, rgba(15,123,213,0.7) 40%, rgba(15,123,213,0.6) 45%, rgba(15,123,213,0.52) 50%, rgba(15,123,213,0.4) 55%, rgba(15,123,213,0.3) 59%, rgba(15,123,213,0.2) 63%, rgba(15,123,213,0.15) 100%);
background-image: linear-gradient(270deg, #0F7BD5 0, rgba(15,123,213,0.7) 40%, rgba(15,123,213,0.6) 45%, rgba(15,123,213,0.52) 50%, rgba(15,123,213,0.4) 55%, rgba(15,123,213,0.3) 59%, rgba(15,123,213,0.2) 63%, rgba(15,123,213,0.15) 100%);
The colors in-between don't matter, as long as it starts with this #0F7BD5 with no transparency, and ends with this rgba(15,123,213,0.15).
There is no need to specify extra color-stop positions as long as the colors in between do not matter. Just specify the start and end colors and that should be enough (first div in snippet). The browser would automatically split the colors evenly and gradually.
When you add extra color-stop positions in between, the gradient is forced to have the specified color at the specified point and this produces the sharp edge effect (second div in snippet). Sharp edges are produced because of uneven distribution of colors. For example, for the first 40% of the gradient, the alpha changes from 1 to 0.7 but for the next 5% (40% to 45%), it suddenly drops by 0.1.
div {
position: relative;
display: inline-block;
height: 200px;
width: 200px;
}
#gradual:after {
position: absolute;
content: '';
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
background-image: linear-gradient(270deg, #0F7BD5, rgba(15, 123, 213, 0.15));
}
#sharp:after {
position: absolute;
content: '';
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
background-image: linear-gradient(270deg, #0F7BD5 0, rgba(15, 123, 213, 0.7) 40%, rgba(15, 123, 213, 0.6) 45%, rgba(15, 123, 213, 0.52) 50%, rgba(15, 123, 213, 0.4) 55%, rgba(15, 123, 213, 0.3) 59%, rgba(15, 123, 213, 0.2) 63%, rgba(15, 123, 213, 0.15) 100%);
}
<div id="gradual"></div>
<div id="sharp"></div>