HTML Gradients with CSS — Colorful Slippery Slope
Contains visual diagrams for every single CSS property in common use.medium.com
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:
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:
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.
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.
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 :-)