Kevin Powell - Community•7mo ago

How can I make the top of this overlay transparent?

Hey guys I got this code and you can see it looks like like a "box"but I'm trying to make the top more transparent so it kinda fades it. not sure how to get this, any ideas?

.blog-post .black-overlay {
   display: block!important;
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
   height: 32px;
   width: 100%;
   background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 250%);
}

.blog-post .black-overlay {
   display: block!important;
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
   height: 32px;
   width: 100%;
   background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 250%);
}

2 Replies

MarkBoots•7mo ago

don't know what look you exacty want to acchieve, but you could use a mask-image: gradient(). transparent is the part that is hidden, black the part that is visable. It works the same as a normal background gradient, so you can setup color-stops too for example

.blog-post .black-overlay{
  --mask-image: linear-gradient(to bottom, transparent, black);
  -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image)
}

.blog-post .black-overlay{
  --mask-image: linear-gradient(to bottom, transparent, black);
  -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image)
}

chromium browsers are implementing mask as we speak, but they do support the webkit version already. so thats why i set up a variable to add to the webkit and the normal version

squidiw•7mo ago

sorry Mark, i didnt get notified when you replied. Thank you for the response. I was able to get it to work with a linear-gradient and some tweaking 😄

Gaming

Programming

How can I make the top of this overlay transparent?