HTML Gradients with CSS — Colorful Slippery Slope

JavaScript Teacher
Mar 1, 2018 · 3 min read

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:

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
background: linear-gradient(to left, black, white); and background: linear-gradient(to right, black, white);
Image for post
Image for post
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.
Image for post
Image for post
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.
Image for post
Image for post
radial-gradient works in the same exact way, except it produces a spherical / circular gradient.
Image for post
Image for post
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.)
Image for post
Image for post
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.
Image for post
Image for post
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:
Image for post
Image for post
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 :-)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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