0

I'm trying to accomplish some thing like: enter image description here

Where I have the bottom of a div fading into the color of the div that comes after. Not sure what the best way to accomplish this is to use a linear gradient or an image.

I have tried this solution and it resulted in this:

Which is close but the fade begins a bit high.

.sumo-section {
    -webkit-mask-image: -webkit-gradient(linear, left top, 
    left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

How should I modify it to get the transition to begin further down the div?

trojanv1rus
  • 11
  • 2
  • 1
    Does this answer your question? [CSS3 opacity gradient?](https://stackoverflow.com/questions/15597167/css3-opacity-gradient) – Roberto Zvjerković Nov 23 '21 at 06:50
  • @RobertoZvjerković Close, I used the top solution but the fade starts a bit high. How would I use the webkit gradient to start the transition further down the div? – trojanv1rus Nov 23 '21 at 06:59
  • By changing some values in the gradient part – Rana Nov 23 '21 at 07:04
  • @Rana The syntax of webkit-gradient is a bit confusing to me. I know with linear gradient I would put a percent after the rgba value to state where I want the transition to start and finish. Not sure how to accomplish the same idea with webkit – trojanv1rus Nov 23 '21 at 07:20
  • It is same as normal gradient but have a prefix `-webkit-` so just treat it as normal and enter the values you would in normal gradient – Rana Nov 23 '21 at 07:23

1 Answers1

0

Linear gradient because is rendered by the browser, you have better control and can be dynamic (easier) if you need so. I don't think there is better a reason to use an image instead.

Derian André
  • 220
  • 3
  • 12