I need this type gradient in the bottom of a background image
I can't figure out – how to I can make this type gradient with CSS. I've uploaded my code in jsFiddle.
.single-blog-bg {
background-size: cover;
background-attachment: fixed;
height: 350px;
position: relative;
}
.single-blog-bg:before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 300px;
bottom: 0;
background: linear-gradient(to bottom, white 10%, white 30%, white 60%, white 100%);
opacity: .5;
}
<div class="single-blog-bg" style="background-image: url(https://i.stack.imgur.com/VT8SR.jpg)"></div>
Here showing white gradient but not like what I expect.
Has there anybody who will help me to get the exact CSS code?
Add This Style to Image:
mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
Use background: linear-gradient(to bottom, rgba(255,255,255,0), white 100%); for the bottom div.
I fork your jsfiddle here.
You can use the background like this.
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
Check the codepen here
Try changing css-
i have done for you
.single-blog-bg {
background-size: cover;
background-attachment: fixed;
height: 350px;
position: relative;
}
.single-blog-bg:before{
content: '';
position: absolute;
display: flex;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(to bottom, rgb(0, 0, 0) 30%, rgb(255, 255, 255) 100%);
opacity: .5;
}
do check- https://codepen.io/djmayank/pen/vJyoVe
Have you tried using alpha in the color?
Change the gradient rule to something like this:
.single-blog-bg:before{
content: '';
position: absolute;
left: 0;
right: 0;
top: 100px;
bottom: 0;
background: linear-gradient(to bottom, rgba(255,255,255,0) 10%, rgba(255,255,255,0.9) 100%);
}
Edit: Remove the opacity property, change the bottom color alpha and give the effect more height
.single-blog-bg {
background-size: cover;
background-attachment: fixed;
height: 350px;
position: relative;
}
.single-blog-bg:before {
content: '';
position: absolute;
left: 0;
right: 0;
/*top: 300px*/
bottom: 0;
background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 10%, rgba(255, 255, 255, 0.13) 60%, rgba(255, 255, 255, 0.04) 70%);
/* opacity: .5; */
height: 100%;
}
opacity: .5;
}
<div class="single-blog-bg" style="background-image: url(https://images.unsplash.com/photo-1495935225637-fa5838607df7?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=)">
</div>
Related
I applied this code to make the content underneath a div blurry, but the edge is very sharp.
z-index: 10;
backdrop-filter: blur(10px);
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,0) 10%, rgba(174,174,174,0) 15%, var(--bg-color) 85%);
Can I create something like a blur gradient to soften the edge and make the blur gradually disappear?
To make Tilt-Shift effect for backdrop-filter in CSS, You have to use the mask-image attribute like the code below:
CSS:
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
-webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, black 20%, black 100%);
mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, black 20%, black 100%);
You can change the position of tilting by percent, but I think this config is exactly what you need.
.menu{
color: white;
position: sticky;
display: flex;
place-content: space-evenly;
align-items: center;
height: 80px;
}
.menu:before {
content: '';
height: 80px;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
-webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, black 40%, black 100%);
mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, black 40%, black 100%);
}
body{
width: 100%;
height: 100vh;
background: url("https://images.unsplash.com/photo-1444080748397-f442aa95c3e5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHx8&w=1000&q=80");
background-repeat: no-repeat;
background-size: cover;
margin: 0;
}
<body>
<div class="menu">
<span>Home</span>
<span>About</span>
<span>Contact</span>
</div>
</body>
Hi I have a problem adjusting my linear gradient border. It is looking like this :
I want it to be looking like this ^ .
Could anyone help please.
.bot-right {
position: relative;
height:400px;
}
.bot-right:before, .bot-right:after {
content: "";
position: absolute;
bottom: -3px;
right: -40px;
}
.bot-right:before {
top: -3px;
width: 3px;
background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#009ee3), to(transparent));
background-image: -webkit-linear-gradient(transparent, #009ee3);
background-image: -moz-linear-gradient(transparent, #009ee3);
background-image: -o-linear-gradient(transparent, #009ee3);
}
.bot-right:after {
left: -3px;
height: 3px;
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#009ee3), to(transparent));
background-image: -webkit-linear-gradient(right, #009ee3, transparent);
background-image: -moz-linear-gradient(right, #009ee3, transparent);
background-image: -o-linear-gradient(right, #009ee3, transparent);
}
<div class="bot-right "></div>
a simple border-image and can do it
.bot-right {
position: relative;
height:400px;
border:3px solid;
border-image: linear-gradient(90deg,transparent, #009ee3) 3;
}
<div class="bot-right "></div>
I'm not sure how to explain my question. So here's a fiddle:
https://jsfiddle.net/8zsqydj0/
.background-img-wrapper:before {
content: "";
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(to right, rgba(252, 252, 252, 1) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, rgba(252, 252, 252, 1) 100%);
}
.background-img-wrapper {
max-width: 1920px;
}
.background:before {
content: "";
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 80%, rgba(252, 252, 252, 1) 100%);
}
.background {
width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row justify-content-center position-fixed background">
<div class="background-img-wrapper">
<img class="img-fluid" src="https://via.placeholder.com/1920x1080/000000/" />
</div>
</div>
I'm trying to apply a gradient to three sides of the image. That far I got. However, the image is centered on the page and has a fixed (max) width of 1920px. The gradient is applied to a parent div that is 100% of the page and the image is img-fluid. So, when the gradient is viewed on a resolution of 1920px or lower everything looks fine. However, when you resize the page above a width of 1920px, the gradient moves with the side of the window instead of staying fixed at the sides of the image. If that makes sense.
So, how to apply the gradient to the image instead of the parent div, or how to limit the sides of the gradient to the image size? I'm using Bootstrap 4.
Also, I don't necessarily need to keep the current structure. If there's a better way to achieve all this please do let me know :)
I will replace 1920px with a smaller value so we can better see the result
An easy fix would be to add position:relative and adjust z-index like below:
.background-img-wrapper:before {
content: "";
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(to right, rgba(252, 252, 252, 1) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, rgba(252, 252, 252, 1) 100%);
}
.background-img-wrapper {
max-width: 400px;
position:relative; /* added */
}
.background:before {
content: "";
top: 0;
left: 0;
position: absolute;
z-index:1; /* added */
height: 100%;
width: 100%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 80%, rgba(252, 252, 252, 1) 100%);
}
.background {
width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="row justify-content-center position-fixed background">
<div class="background-img-wrapper">
<img class="img-fluid" src="https://via.placeholder.com/400x300/000000/"/>
</div>
</div>
Or simplify your code like below:
.background:before {
content: "";
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
background:
linear-gradient(to bottom, transparent 80%, #fff 100%),
linear-gradient(to right, #fff 0%, transparent 20% 80%, #fff 100%);
}
.background {
max-width: 400px;
left:0;
right:0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="position-fixed background m-auto">
<img class="img-fluid" src="https://via.placeholder.com/400x300/000000/"/>
</div>
If the ratio of the image will always be the same you can still simplify:
.background:before {
content: "";
padding-top:calc(300/400 * 100%); /* Height/width */
}
.background {
max-width: 400px;
left:0;
right:0;
background:
linear-gradient(to bottom, transparent 80%, #fff 100%),
linear-gradient(to right, #fff 0%, transparent 20% 80%, #fff 100%),
url(https://via.placeholder.com/400x300/000000/) center/cover;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="position-fixed background m-auto d-flex">
</div>
I am trying to create a specific shape with specific color to keep it as a background. I successfully created gradient color that I want but I am struggling with getting shape right.
Here is what I have done and what is am trying to achieve,
My Work :
Expectation :
Code :
.grad {
height: 400px;
width: 900px;
background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}
<div class="grad"></div>
I am open to use any other method as long as it is only one 'div'. I don't want to use two different div which are causing many issues in responsive design. I tried using clip-path but that too did not help because of the nature of the design.
Any help would be appreciated.
Use multiple gradient then adjust dimension and position to obtain what you want:
.grad {
height: 100px;
width: 300px;
background:
linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0) 0 0/100% calc(100% - 10px) no-repeat,
linear-gradient(110deg, #62e6a5 52%, transparent 0) 0 100%/100% 100% no-repeat;
}
<div class="grad"></div>
Use pseudo-elements like :before and :after
.grad{
position: relative;
height:200px;
width:450px;
margin-bottom: 10px;
background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}
.grad-new{
position: relative;
height:200px;
width:450px;
margin-bottom: 10px;
overflow: hidden;
background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}
.grad-new:before{
content: '';
position: absolute;
width: 3%;
height: 10px;
bottom: 0;
right: 55.6%;
background: #62e6a5;
transform: skew(-20deg);
}
.grad-new:after{
content: '';
position: absolute;
width: 100%;
height: 10px;
bottom: 0;
left: 44.4%;
background: #fff;
transform: skew(-20deg);
}
<div class="grad"></div>
<div class="grad-new"></div>
I have some problems with the picture display. Below is my code：
.night-sky {
position: relative;
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background: -webkit-linear-gradient(top, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
}
.night-sky:before {
height: 100%;
width: 100%;
content: ' ';
position: absolute;
top: 0;
/* http://bg.siteorigin.com/ */
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/424395/night-sky-texture.png");
opacity: .1;
}
body {
height: 100%;
margin: 0;
background: #000;
}
<body>
<div class="night-sky">
<p>qerqwer</p>
<p>hahahh</p>
</div>
</body>
This is how it looks like now:
If I didn't add the paragraph between the class div class = "night-sky" , it just shows nothing. but if i just add the background-image in the body it will shows correctly. I don't know what's wrong.
Thanks.
Add height: 100% to html and that would solve the problem.
Some suggestions:
You can see that now there would be some margin at the top - this comes due to margin collapsing (you can read more about it in this SO thread). To remove this add a border to the night-sky
Finish it up with:
* {
box-sizing: border-box;
}
so that there is no scrollbar on the body - see why border-box is important in this SO thread
Cheers!
* {
box-sizing: border-box;
}
html{
height: 100%;
}
.night-sky {
position: relative;
height: 100%;
margin: 0;
border: 1px solid black;
background-repeat: no-repeat;
background-attachment: fixed;
background: -webkit-linear-gradient(top, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
}
.night-sky:before {
height: 100%;
width: 100%;
content: ' ';
position: absolute;
top: 0;
/* http://bg.siteorigin.com/ */
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/424395/night-sky-texture.png");
opacity: .1;
}
body {
height: 100%;
margin: 0;
background: #000;
}
<body>
<div class="night-sky">
<p>qerqwer</p>
<p>hahahh</p>
</div>
</body>
html, body { height: 100%; width: 100%; margin: 0;}
.night-sky {
position: relative;
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background: -webkit-linear-gradient(top, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
}
.night-sky:before {
width: 100%;
content: ' ';
position: absolute;
top: 0;
/* http://bg.siteorigin.com/ */
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/424395/night-sky-texture.png");
opacity: .1;
}
body {
height: 100%;
margin: 0;
background: #000;
}
<body>
<div class="night-sky">
<p>qerqwer</p>
<p>hahahh</p>
</div>
</body>
Try this:-
<div style="background-image:url(http://www.html.am/images/image-codes/milford_sound_t.jpg);width:220px;height:140px;">
</div>