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!
For source codes and textual description, see this blog post: https://ideaspot.tv/svg-linear-gradie...
Want to learn more? Try my Udemy course on HTML, CSS and LESS: https://www.udemy.com/course/html-css...
🌎 Find me here:
My blog: https://ideaspot.tv
My company website: https://ideaspot.co.uk - get some work done for you!
Twitter: / ideaspot_tv
FB: / 100085799476852
⌚ 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
