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.
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 that the parts that are "whited" to get the image blurred.
I've tried using pseudo elements ::after and ::before to add the overlays but could only blurred the overlay.
tried with borders 2nd example codepen, but no sucess because with the transparent it creates a "square".
https://codepen.io/giventofly/pen/RQpqYZ
.hero-image {
width: 1280px;
height: 800px;
background-image: linear-gradient(rgba(46, 51, 82, 0.6) 100%, transparent 0), linear-gradient(125deg, rgba(255, 255, 255, 0.5) 35%, transparent 0), linear-gradient(-55deg, rgba(255, 255, 255, 0.5) 25%, transparent 0),
url('https://cdn.vox-cdn.com/thumbor/NU6lcSN3DGmjF7NhZp6ixY3HxgQ=/0x0:1620x1080/1200x800/filters:focal(0x0:1620x1080)/cdn.vox-cdn.com/uploads/chorus_image/image/46510678/Tarmogoyf_DGM_1920x1080_Wallpaper.0.0.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 10;
}
<div class="hero-image"></div>
I only want to blur the part of the image that is "behind" the white linear-gradient
I'm sure someone can refine this approach a bit, but the main takeaways are:
Include the image twice in a container element.
Stack the two images.
Blur one and place it on the bottom.
Use clip-path on the top image to display the non-blurred region.
Insert a frost layer (transparent white) with a pseudo element of the container element between the two images.
Control layering with positioning and z-index.
.img-overlay {
display: inline-flex;
position: relative;
overflow: hidden;
}
.img-overlay::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba( 255, 255, 255, 0.5 );
z-index: 1;
}
.img-overlay img:first-child {
position: absolute;
top: 0;
left: 0;
filter: blur( 3px);
z-index: 0;
}
.img-overlay img:last-child {
position: relative;
z-index: 2;
-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
<div class="img-overlay">
<img src="http://unsplash.it/400/400?image=16">
<img src="http://unsplash.it/400/400?image=16">
</div>
You can use clip-path for this. The idea is to have two similar layer, the top with the clip-path to show only the needed part and keep the blur on the bottom layer visible. You can switch the blur between both element if you want to blur the middle part instead:
.hero-image {
width: 600px;
height: 250px;
position: relative;
overflow: hidden;
}
.hero-image:after,
.hero-image:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: center/cover no-repeat;
background-image:
linear-gradient(rgba(46, 51, 82, 0.6) 100%, transparent 0),
linear-gradient(125deg, rgba(255, 255, 255, 0.5) 35%, transparent 0),
linear-gradient(-55deg, rgba(255, 255, 255, 0.5) 25%, transparent 0),
url('https://picsum.photos/id/1024/800/800');
}
.hero-image:before {
filter: blur(4px);
}
.hero-image:after {
clip-path: polygon(45% 0, 97% 0, 68% 100%, 16% 100%);
}
<div class="hero-image"></div>
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
How can make a simple border bottom color with gradient color?
div{
border-bottom:10px solid linear-gradient(#FF4000, transparent);
height:20px;
width:auto;
background:#ccc;
}
<div></div>
To set a border gradient on a single border (or multiple borders), you simply need to declare style rules in your CSS for:
border-image
border-image-slice
border-image-width
.box {
width: auto;
height: 20px;
background: #ccc;
border-image: linear-gradient(to right, rgba(255, 64, 0, 1), rgba(255, 64, 0, 0));
border-image-slice: 1;
border-image-width: 0 0 10px 0;
}
<div class="box">
</div>
N.B. The fade-to-transparent gradient is achieved using rgba colors (in place of hex colors).
rgba(255, 64, 0, 0) (with an alpha channel of 0) is the completely transparent equivalent of rgba(255, 64, 0, 1) (which, with an alpha channel of 1, is completely opaque).
Using :after pseudo element and linear-gradient you can get desire results. Here in this code I am using background:liner-gradient on :after pseudo element with just using a one single element.
You may have to use browser prefix as well if you targeting older browsers.
Check Demo as well.
div {
height: 100px;
border: 1px solid red;
position: relative;
}
div:after {
height: 2px;
width: 100%;
position: absolute;
content: "";
left: 0;
bottom: 0;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
<div>Hi</div>
Try like this:
.myClass {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,172)), color-stop(0.67, rgb(0,255,255)));
background-image: -moz-linear-gradient(center bottom, rgb(14,173,172) 50%, rgb(0,255,255) 67% );
padding: 10px;
}
.myClass > div { background: #fff; }
JSFIDDLE DEMO
You can set gradient as border color. But you can do it using another element.
<style>
div {height:20px; background: linear-gradient(#FF4000, transparent); padding-bottom: 10px;}
div div {background: yellow; padding-bottom: 0;}
</style>
<div>
<div></div>
</div>
http://jsfiddle.net/7et1w393/
-webkit-linear-gradient(to right, #3acfd5 0%, #3a8ed5 100%)
div {
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
height: 20px;
width: auto;
background: #ccc;
}
<div></div>