How to draw CSS art using CSS gradients

Video contents:

- Intro + setting the stage:
- How to center vertically and horizontally in CSS: 1:13
- Gradients:
- Linear gradient: 2:52 (plus some common features)
- Radial gradient: 10:01
- Conic gradient: 14:16
- Drawing the CSS art: 27:04

A couple of people that create single-element CSS art, and that you should definitely check to learn more by digging into their code:

- Lynn Fisher:
- Temani Afif:

MDN pages with documentation about properties mentioned in the video:

[markovujanic]

perfectly explained. Thanks Alvaro, I had some problems understanding radial-gradient.

[nazanin_ashrafi]

Gradient is starting to make sense 🤯🤯🤯
Thank you Alvaro 🙏🏻🙏🏻

[ellsonmendesYT]

I've just figure it out what you called the proble, at 20:47, by setting the position you actually define the pivot point from wich it will increase or decrease
say you define position to be 50% 0 (center top) then second paramter (x, y) will increase downwards, on the other hand if you set position 50% 100% (middle bottom) it increases second parameter upwards 😊😊

[AnkitMakwana-qotn]

why do you write hexcode like this #f003 insted of #00ff00 where 1st 2 digits mean red 2nd two green and last 2 blue
i dont understand #f003 which digit stands for which color.