css quick maffs

so, you want to make a css gradient from a certain color into transparent. The logical way would be doing it like this:

linear-gradient(#112233, transparent)

however, this will cause a blurred black stripe to appear in safari. This is due to safari-specific algorithms (that also make it the quickest browser, especially on arm-powered macs).

stackoverflow and other boubas will suggest doing this:

linear-gradient(#112233, rgba(255, 255, 255, 0))

this is better, but instead of a black stripe, a half-transparent white stripe will appear.

To finally make this gradient render consistently across different browsers, do this:

linear-gradient(#112233, #11223300)

Now, you're only changing alpha. See, CSS is a declarative language, so you should be telling it EXACTLY what you want to achieve. You don't want to change one color into another (in that case, "#112233" into "transparent", yes, they are distinct colors that are totally different. CSS doesn't treat "transparent" in some special way like we do) but to only change the alpha channel of #112233.

Feel free to use rgba notation if you want to support older browsers:

linear-gradient(rgba(11, 12, 13, 1), rgba(11, 12, 13, 0))

aight bye