Skip to content

Instantly share code, notes, and snippets.

@bhuvidya
Last active April 23, 2019 10:45
Show Gist options
  • Save bhuvidya/20f38c6ef7828ca9459489d1a95d0d6e to your computer and use it in GitHub Desktop.
Save bhuvidya/20f38c6ef7828ca9459489d1a95d0d6e to your computer and use it in GitHub Desktop.
CSS Miscellany - Fade Out Background
// first approach
.parent {
overflow: hidden;
position: relative;
height: 10rem;
}
.parent::after {
content: "";
position: absolute;
bottom: -3rem;
right: 0;
width: 100%;
height: 6rem;
background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff 50%);
}
// second approach - put a fadeout above a div
.parent {
box-shadow: 0px 0px 102px 110px rgba(255, 255, 255, 0.8), 0 0 10px 2px rgba(0, 0, 0, 0.6);
}
// first approach
.parent {
overflow: hidden;
position: relative;
height: 10rem;
&::after {
content: "";
position: absolute;
bottom: -3rem;
right: 0;
width: 100%;
height: 6rem;
background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff 50%);
}
}
// second approach - put a fadeout above a div
.parent {
box-shadow: 0px 0px 102px 110px rgba(255, 255, 255, 0.8), 0 0 10px 2px rgba(0, 0, 0, 0.6);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment