HTML Gradients with CSS — Colorful Slippery Slope

You can Follow me on Twitter to get tutorials, JavaScript tips, etc.

I mean Cascading Style Sheets. Because seriously… how many times since the 90’s do we need to hear that phrase? To add gradients to your HTML elements you must use CSS properties: linear-gradient and radial-gradient.

Grab your copy of CSS Visual Dictionary incl. diagrams of all CSS properties.

To get a good idea of how flex works try flex layout editor on this page.

In this quick intuitive CSS gradients tutorial we’ll discover how to create pretty much every type of a gradient you can imagine.

CSS gradients come in different flavors:

Image for post
Image for post

You can create vertical (default,) horizontal, slanted, rotated, circular and repetitive (pattern) gradients.

To demo gradients we will use this specimen. The HTML <div> element:

Image for post
Image for post

CSS gradients will automatically adapt to the element’s width and height. Which might produce a slightly different effect.

CSS gradient values are supplied to CSS background property!

Below these values will be demonstrated and shown underneath the resulting gradient they represent.

Image for post
Image for post

Let’s use monochrome black and white gradients for most of the examples just to demonstrate direction of the light in each case. Of course… you can change the gradient colors to anything you wish.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

That’s pretty much it to CSS gradients. You can achieve some interesting results by juggling around CSS parameters. Good luck on your journey to become a fine gradient craftsman!

My HTML book HTML — Intuitive Guide has more examples.

Congratulations. You now have a handful of ideas about using css gradients. You can follow me on GitHub — I follow back! This article was sponsored by Learning Curve software literature publisher.

Thanks for reading :-)

Written by

Issues. Every webdev has them. Published author of CSS Visual Dictionary https://amzn.to/2JMWQP3 few others…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store