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:

CSS / HTML Gradients come in different flavors.

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:

The row and column on the right hand side demonstrate this. The gradient property was not changed here. Only the element’s dimensions.Keep this in mind when making your own gradients!

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.

background: linear-gradient(black, white);

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.

background: linear-gradient(to left, black, white); and background: linear-gradient(to right, black, white);
Use “to top left”, “to top right”, “to bottom left” and “to bottom right” to if you want to fill an HTML element with a gradient starting from a particular corner of the element.
linear-gradient also accepts an angle in degrees when starting a gradient from a 45-degree corner is not enough and you need more flexibility.
radial-gradient works in the same exact way, except it produces a spherical / circular gradient.
You can start radial-gradient from any of the corners of an HTML element. Watch the direction… “at top left” for example starts at top left and flows toward its opposite corner (bottom right.)
CSS can also create repeating gradients. Just specify the color and span length of the pattern. This works on both radial and linear gradients… The properties you need to use are repeating-linear-gradient and repeating-radial-gradient.
HSL colors represented by range of 0–300 can be used. For example 0 is red. 50 is yellow… all the way to 300 (the maximum value of HSL range) representing purple / magenta color. You can scale the colors in any way you wish as shown in the examples above. In addition here is the HSL color scale:
HSL color scale.

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 :-)