Making Attractive Functional Gradients in CSS

By |October 11th, 2016|Categories: CSS, CSS3|

CSS gradients are a great tool in any modern developer’s arsenal. These gradients allow you to display smooth transitions between multiple rounds of specified colors. Similar to how you can declare a set background solid color element in CSS, you can also do this to declare a gradient background.

Using gradients in CSS is a much better way then the primitive use of actual image files. We can create our own functional gradients now, a much better method for better performance and control over our web designs. You’ll be able to use CSS gradients to take down the download time and significantly reduce bandwidth usage. Elements with added gradients look way better zoomed in when through browser generation.

Fundamentals of Gradient Creation

Gradients are usually one color that fades into a different one. In CSS you have the capacity to control every region of how the color changes happen. These attributes consist of direction of colors to how the color change happens.

There are two types of gradients defined in CSS:

Linear Gradient: Up,Down / left,right / diagonally

Radial Gradients: Defined by location of their center

If we’re going to create a linear gradient, first you have to set a gradient class. Define it’s size, here’s how the start of your HTML code should look.

The first gradient we’re going to create is a linear gradient that changes from the top down. Gradients are called upon with background-image as opposed to background-color, but both will be used here. Linear-gradient() is the most useful and common gradient type. The axis can go in all areas of direction, any angle you deem fit. Declaring no angle, the automatically generated CSS Gradient will default to top to bottom. We’re going to make a simple blue to purple hue gradient with the following properties, using #820765 from our Hex color. Here is the following code.

See the Pen CSS Linear Gradient by Mike Colagrossi (@SantinoMPC) on CodePen.

Play around with the following code by adding different base colors and gradient colors. Here are a list of other attributes you can add to the code to vary the linearity.  

  • To Right/ To Top Right
  • __Degree: The method will change the coloring placement based on degrees.
  • If you want to add an additional color, place a comma, and add additional color code line below.

Now it’s time to move onto a Radial Gradient example. Radial gradients are different from linear in the way they start from a single center point and radiate outwards. Gradients are ways to emulate lighting, which isn’t always static or straight. The default is for the color element to start from the center and emanate outwards. The following code has some different colors and one key distinction radial-gradient is called instead

See the Pen CSS Radial Gradient by Mike Colagrossi (@SantinoMPC) on CodePen.

The default radiance is that of an ellipse. You can easily change this by changing the code to output a circle. The different values you can use include closest-corner, farthest-corner and closest side, farthest side. Example and running code below.

See the Pen CSS Gradient Circle by Mike Colagrossi (@SantinoMPC) on CodePen.

These are the basics of using and understanding the fundamental basics of creating functional gradients in CSS.

Mike Colagrossi