Search code examples
htmlcssstylesstyled-components

How can I add gradient to left and to right?

Goal is adding liner-gradient to left and to right.

I can add to right but not both at the same time

mask-image: -webkit-linear-gradient(
to right,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.65) 100%
);

-webkit-mask-image: linear-gradient(
to right,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.65) 100%
);

The result should be like this enter image description here

Solution

  • You could do an overlay with this:

    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);