CSS vs SVG Linear Gradient | CSS linear-gradient() | SVG linearGradient

Learn how to use SVG linear gradient. Multiple ideas how to obtain gradient backgrounds with SVG, compared to CSS linear-gradient() function.

So far we have been using CSS linear-gradient() and repeating-linear-gradient() functions to compute amazing gradients without the need to use external graphics software. In this video I will try to reproduce these ideas with basic SVG syntax instead!

🌎 Find me here:

⌚ Chapters:
0:00 Introduction
0:52 What is the SVG tag?
2:00 What is SVG viewBox attribute?
3:42 How to draw rectangle in SVG with rect tag and fill with solid color?
4:19 How to create linear gradient in SVG embedded in HTML?
5:44 How to rotate linear gradient in SVG embedded in HTML same as CSS linear-gradient()?
9:12 How to hint SVG linearGradient midpoint position?
12:54 How to create linear gradient with three colors in SVG embedded in HTML?
13:30 How to position colors in SVG linear gradient?
15:52 How to create sharp stripes in SVG linear gradient same as CSS linear-gradient()?
16:55 Transparent linear gradient in SVG embedded in HTML and CSS.
18:07 Gradient background layers in SVG embedded in HTML and CSS.
21:26 Background layers in SVG to create mist fog effect.
23:18 Repeated linear gradient in SVG embedded in HTML same as CSS repeating-linear-gradient().
25:05 Summary
25:32 See more...

#ideaspottv, #css, #html, #linear_gradient, #gradient, #svg