How to make background SLIGHTLY fade from top and bottom?
Question
I've been trying to slightly fade the top and bottom of my <div> 's background, but every time it ends up fading almost till the middle which is not what I want.
I'd like to mush the border of the two <div> s.
background: linear-gradient(white, #c3faec, white);
Have used this and tried to change the % on both colour without success.
4 answers
solution1
3 2019-04-08 08:40:06
Set explicit distances for each colour to start and stop, then set your middle colour in two positions to make it solid for that area.
div { height: 90vh; margin: 5vh; background: linear-gradient(white 0%, red 10%, red 90%, white 100%); }
<div></div>
solution2
2 ACCPTED 2019-04-08 08:36:37
You can create two CSS pseudo elements and configure the gradients independently with the element's height and colour gradient stops.
Example: https://codepen.io/giumagnani/pen/ZZpmje
div {
margin: 100px 0;
background: #2222ff;
height: 600px;
position: relative;
}
div::after {
position: absolute;
content: "";
height: 30%;
width: 100%;
top: 0;
left: 0;
background: linear-gradient(white 0%, transparent 100%);
}
div::before {
position: absolute;
content: "";
height: 30%;
width: 100%;
bottom: 0;
left: 0;
background: linear-gradient(transparent 0%, white 100%);
}
solution3
1 2019-04-08 09:55:06
You can add the direction too in the gradient property. Hope this works.
div { height:100vh; background: linear-gradient(to bottom,white, #c3faec, white); }
<div></div>
solution4
0 2019-04-08 08:39:57
You can make background slightly fade from top and bottom by this code of css
body { background-repeat: no-repeat; background-attachment: fixed; background-image: linear-gradient(white 10%, black 80%, white 10%); }
<html> <head> <title> "your title" </title> </head> <body> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.