CSS3 Gradients for Web Designers
4.8 (10 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,209 students enrolled
Wishlisted Wishlist

Please confirm that you want to add CSS3 Gradients for Web Designers to your Wishlist.

Add to Wishlist

CSS3 Gradients for Web Designers

Learn CSS3 Gradients to create beautiful backgrounds & patterns without any real images
4.8 (10 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,209 students enrolled
Created by Ajin Nikam
Last updated 8/2016
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 1.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • By the end of this course you will be able to understand and create Linear Gradients and Radial Gradients
  • You will understand color stops and how to add them.
  • You will understand how to use transparency
  • Using fallbacks, prefixes for web browsers.
View Curriculum
  • Intermediate or basic knowledge of HTML and CSS
  • HTML CSS editor any free or paid

This is the course which covers css3 background gradient property. It covering the best practices for creating different types of css background using gradient property. By taking this course any HTML CSS lover can create beautiful backgrounds using CSS3 Gradients easily. This is only 1 hour course means you don't need to wait 6 to 10 long hours to get-started.

This course covering topics like
Definition of CSS3 Gradient
Who is and where using this property.
What is and how to create Linear Gradient.
Specify colors using types of methods.
declaring prefixes and fallback
Specify directions, angles, positions and color stops
We will also cover how to use transparency and solid colors.
What is repeating linear gradients and how to create it.
Creating Radial Gradient, with repeating gradient.
How to set shapes and positioning the gradient center.

Who is the target audience?
  • This course is for web designers and front-end developers who want to learn about the latest generation of browser-based technologies.
  • You should take this course if you want to update your css skill
  • This course is for Entrepreneurs who want to start their web design and development business.
  • Students
Students Who Viewed This Course Also Viewed
Curriculum For This Course
21 Lectures
5 Lectures 11:56

A brief introduction about the author and the course.

Preview 00:51

In this lecture we will see what is css3 gradients, what is the use of css3 gradients and benefits of using gradients.

Preview 01:49

In this lecture we will see who is using gradients on their websites and where they are using .

Preview 06:07

Small introduction about browsers support to css3 gradients property.

Preview 02:01
Linear Gradient
9 Lectures 43:58

In this lecture we will learn about linear gradient. What is mean by linear gradient, What syntax used to create. And we will see practically how to create it.

Preview 06:30

This lecture will demonstrate types of methods used to specify color stops in gradients. 

How to Specify colors

If you are targeting older browsers this lecture will show you how to do that. it will show you fallback colors and prefixed gradient declarations for those browsers.

How to declare Prefixes and Fallback Colors

By default gradient starts from top side and goes to bottom direction. but we can specify the direction for the gradient with  predefined directional keywords. This video tutorial will show you how to do that.

Specify Directions to Gradient

If you want more control over the direction of the gradient,  you can define an angle, instead of the predefined directional keywords (to right, to left, to bottom, to top, to top right, top top left etc). In this lecture we will learn to define angles for CSS3 gradients.

Use Angles for Gradient Directions

Using Color Stops

Solid Colors Using Color Stops

Using Transparency

Repeating Linear Gradient
CSS3 Radial Gradients
5 Lectures 15:37
CSS3 Radial Gradients

Set Shapes in Raidal Gradients

Positioning the gradient center

Size Keywords

Repeating Radial Gradient
Exercise Examples
2 Lectures 03:13
exercise example 1

Thank You
About the Instructor
Ajin Nikam
3.3 Average rating
39 Reviews
2,980 Students
3 Courses
Freelancer Web Developer

My name is Ajin Nikam. A freelancer, Web designer and
developer from Pune, Maharashtra, India. I am a graduate working as
a freelancer since 2007.

I've 8 years of practical experience in web designing & development web applications. I have also experience in online marketing, SEO (Search Engine Optimization), SMO (Social Media Optimization), SMM (Social Media Marketing) etc. I design websites and web applications for my clients using HTML5, CSS3, JavaScript, Ruby on Rails, Joomla, Drupal WordPress.

I love to learn and implement new things. It will be my pleasure to share my knowledge with Udemy students.