The Programming Buddy Club Logo
The Programming Buddy Club

CSS and SVG Gradients 2023: Hands-on No-nonsense Guide | Free Udemy Course
Scroll Down to get the courseGet The Course

CSS and SVG Gradients 2023: Hands-on No-nonsense Guide | Free Udemy Course

Free Free100% off
New Free Udemy Course

Create amazing linear, radial and conical gradients in pure CSS or in SVG. - Free Course | Free Udemy Course

(1 ratings)
549 students
Course Language EnglishCourse Caption English [Auto]Course Length 01:41:20 to be exact 6080 seconds!Number of Lectures 12
This course includes:
  • 1.5 hours hours of on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • 8 additional resources

This all-levels course will guide you through the process of learning and practicing creation of modern CSS gradients on your site. Learn how to use CSS and SVG gradients. Multiple ideas how to obtain gradient backgrounds with CSS linear-gradient(), radial-gradient(), conic-gradient() functions, as well as SVG <linearGradient> and <radialGradient> tags.My name is Dr. Artur Karczmarczyk. I am a Full-Stack Web Developer and Software Engineer with over 16 years of commercial experience. I am also an Associate Professor at a well-known Technical University in Poland. I have taught IT and web development to hundreds of students.By the time you finish this course, you'll be able to create basic and advanced gradients and patterns in both CSS and SVGs. We will compare how CSS gradients differ from SVG gradients and which are better for your use case!CSS linear-gradient() and repeating-linear-gradient() functions allow to compute amazing gradients without the need to use external graphics software. On the other hand, SVG provides similar capabilities, are rendered inside browser the same as CSS gradients, yet you can create and customize the gradients in an external graphic tool such as Adobe Illustrator, Affinity Designer or free Inkscape, Figma, Canva etc.In the next hour I will guide you through all the modern and legacy ways how to create and use a gradients on your site. We will start by creating linear gradients using CSS linear-gradient() function. Then we will produce more fancy gradients with the use of radial- and conic-gradient() CSS functions.In the second section, we will use SVG - scalable vector graphics - and try to reproduce the effects from the CSS section. This will allow you to compare pros and cons of both technologies.Finally, we will have some fun going legacy and seeing how the world looked when CSS did not have gradient creation capabilities, and when SVGs were barely supported.This course is for you if you want to learn modern up-to-date CSS3 and SVG gradient skills in an agile, hands-on, no-nonsense manner. So don't hesitate and enroll to this course for free!Who this course is for:Web developers wishing to deepy explore the topic of gradients in HTML using CSS and SVG.

Course Content:

Sections are minimized for better readability, click the section title to view the course content

3 Lectures | 07:49
4 Lectures | 39:34
2 Lectures | 35:36
2 Lectures | 17:25
1 Lectures | 00:56
(1 course ratings)






If you like to get inspired by great web projects, you should check out Made with Javascript. If you have a project that you wish to share with the world, feel free to submit your project on Made with Javascript Club website.

Free Online Tools And Converters for your use

URL Encoder

Input a string of text or a URL and encode the entered string

Try it

URL Decoder

Input an encoded string of text or a URL and decode the entered string

Try it

Color Contrast Checker (WCAG)

Calculate the color contrast ration for your website (WCAG)

Try it

XML Formatter

Paste or upload an XML and have it formatted to a beautiful XML format

Try it

URL Slug Generator

Convert any title or sentence into a variety of slugs for your pages URL

Try it


Draw an e-signature or type a signature for your online signature

Try it

FAQ: Udemy Free course Most frequent questions and answers

Does Udemy offer Free Udemy coupons?

Yes, Udemy is the largest online education platform, with the broadest selection of video-on-demand courses and qualified instructors available to meet your needs. At we curate the latest udemy coupons, their expiry, and the number of uses left of these udemy coupons.

How to get free Udemy courses?

There are two ways to get free Udemy courses:

  1. Go to and search for your desired course category. Then select free from the filter options.
  2. You can also get paid courses for free if you have a coupon. You can head to, where you can get a daily udemy paid course for free.

How to get Udemy Certificates for free?

Udemy offers certification on completion of each course. In order to receive a certificate of completion from Udemy, you need to complete your course 100%. There is a simple hack, you can open a video and jump on the timeline to complete a lecture.

To download the certificate from Udemy, you need to head over to your account on a desktop browser. Udemy certificates can't be accessed on the mobile app.

Do Udemy courses expire?

No, once you enroll, you will have lifetime access to the course. You can complete the course on your schedule.

Why are the Udemy instructors giving away free Udemy Coupons?

Every instructor has worked for hours on each of their courses. As new courses get launched, the instructors have no way to get their course in front of an audience to get some feedback. So, instructors share free coupons for their courses to get feedback from the students. We work with these instructors to get their courses available to our buddies.

Is Udemy safe to use?

Yes, payments on Udemy are safe. It is no different than paying for other services on an application or website and inputting your payment information before receiving your goods. Just be sure to keep your account secure, do not share your udemy accounts.

Can Udemy courses get you a job?

Earning a skill is more valuable than earning a job these days. Skills are your most valuable asset. They can help you qualify for jobs you want and get promoted to more advanced positions within your organization. Unfortunately, it is difficult for many people to balance taking courses with work and family obligations. We have had many students, who have taken just Udemy courses, started a job as well as started freelancing with the skills they have learned.