Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
CSS and SVG Gradients 2025: Hands-on No-nonsense Guide
Rating: 4.7 out of 5(26 ratings)
2,820 students

CSS and SVG Gradients 2025: Hands-on No-nonsense Guide

Create amazing linear, radial and conical gradients in pure CSS or in SVG.
Created byDr. Artur Karczmarczyk
Last updated 2/2025
English
English [Auto],

What you'll learn

  • Learn how to create linear, radial and conical gradients using pure CSS3.
  • Learn how to create linear and radial gradients using SVG.
  • Learn how to overlay multiple gradients one over another.
  • Use transparency and background layer to improve photography colors.
  • Have a little fun trying to reproduce that with legacy image gradients.
  • Animate your CSS gradients.

Course content

6 sections • 13 lectures • 1h 41m total length

  • Introduction2:03

    Learn to create modern CSS gradients and SVG gradients, including linear, radial, and conic options, and compare CSS versus SVG approaches for web pages.

  • Welcome to the Course3:52
  • Community & Support1:54

    Join the course's discord community for help with css gradients, svg gradients, and animations; access announcements and channels: general questions, css gradients, svg gradients, and animations and image legacy gradients.

Requirements

  • Fundamentals of HTML and CSS

Description

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.

Report abuse