All geek questions in one place

CSS gradient opacity (not background)

I know how to create gradient backgrounds with alpha, but I want my element to have a gradient opacity. I am looking for my div and all of its children to apply an opacity gradient.

How to do it? I only need to work it in webkit, as this is a home-only project.

+6
source share
2 answers

The easiest way to do this is PNG. Or use the webkit mask!

http://css-tricks.com/webkit-image-wipes/

+2
source

Create a gradient background, but use rgba colors. The last value will indicate opacity, 1.0 for fully opaque, 0.0 for completely transparent.

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,0)));

Above - from blue to transparent gradient.

+5
source

Source: https://habr.com/ru/post/908001/

More articles:


All Articles