Apply Cool Linear and Radial Gradients Using CSS

Published September 20, 2017 by saurav.roy.

Gradient backgrounds are nice ways of displaying smooth transitions between two or more colors. Instead of relying on a graphic design software like Photoshop to create these effects, you can use simple CSS3 linear and radial gradients to create cool designs.

Apart from saving money on an expensive graphics software package, another great advantage of using CSS for gradients is that download times are significantly cut. While most people nowadays have high-speed internet connections, there are still some people with slower connections, or who use cellular data on mobile devices.

Various browsers support these gradient style properties:

Chrome 26.0, Internet Explorer 10.0, Firefox 16.0, Safari 6.1, and Opera 12.1

  • linear-gradient
  • radial-gradient
  • repeating-linear-gradient
  • repeating-radial-gradient

CSS3 Linear Gradients

Linear gradients can go down, up, left, right, or diagonally. In order to define a linear gradient, you will have to define two or more color stops – the colors you want to create smooth transitions with. In addition, you also have to set a starting point and direction or angle.

The basic syntax for this is:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Linear Top to Bottom Gradient

In the following example, the linear gradient goes from green (top) to yellow (bottom):

css-gradient-01

#grad1 {

height: 200px;

background: linear-gradient(green, yellow);

}

Linear Left to Right Gradient

In the following example, the linear gradient goes from blue (left) to violet (right):

css-gradient-02

#grad2 {

height: 200px;

background: linear-gradient(to right, blue , violet);

}

Angled Linear Gradient

In addition to the predefined gradient directions (to bottom, to top, to left, to right, to bottom left, etc.), you can define an angle by degree.

css-gradient-03

#grad3 {

height: 200px;

background: linear-gradient(-45deg, red, yellow);

}

Linear Gradient with Multiple Color Stops

As previously mentioned, you can also create gradients with multiple color stops. In the example below, there are three (red, yellow, and green). By default, they are evenly spaced. However, if you want to define the spacing, just type a percentage after each color (such as red 10%, green 85%, blue 90%).

css-gradient-04

#grad4 {

background: linear-gradient(red, yellow, green);

}

Repeating Linear Gradient

All of the previously mentioned linear gradient styles can be done in a repetitive style by adding the repeating- variation, as in the example below:

css-gradient-05

#grad5 {

background: repeating-linear-gradient(red, yellow 10%, green 20%);

}

CSS3 Radial Gradients

Radial gradients are defined by their center. In order to define a radial gradient, you will have to define two or more color stops – the colors you want to create smooth transitions with.

The basic syntax for this is:

background: radial-gradient(shape size at position, start-color, ..., last-color);

As with linear gradients, the default spacing for radial gradients is evenly spaced ellipses, but you may specify the shape (for example, either: ellipse or circle) and spacing by percentage (for example: red 5%, yellow 15%, green 60%).

css-gradient-06

#grad6 {

background: repeating-linear-gradient(red, yellow 10%, green 20%);

}

Repeating Radial Gradient

All of the previously mentioned radial gradient styles can be done in a repetitive style by adding the repeating- variation, as in the example below:

css-gradient-07

#grad7 {

height: 200px;

width: 300px;

background: repeating-radial-gradient(red, yellow 10%, green 15%);

}

Transparent Gradients

Lastly, you can also use CSS3 to create gradients that involve transparency, so very cool fading effects could happen. Simply use the rgba() function when defining the different color stops in any of the codes and examples used above. The rgba() function uses values of 0 to 1 – 0 meaning full transparency, while 1 means full color or zero transparency.

css-gradient-08

#grad8 {

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

}

In the example above, the gradient starts from fully transparent towards becoming fully red.

Use a CSS Preprocessor

Published February 22, 2013 by saurav.roy.

Three popular CSS Preprocessors: Sass, Stylus, and Less

CSS Preprocessors have been around for a while now, but I didn’t start seriously looking into them until about a year ago. I have loads of excuses for this: I was too busy, I already knew how to write CSS, cool kids write their CSS by hand… you get the idea. Basically, I didn’t think yet another language like LESS, Stylus or Sass would have anything to offer me.

I was wrong, and CSS Preprocessors are awesome. Here are three good reasons why. Read On…

Making a Sphere in CSS

Published January 9, 2013 by saurav.roy.

CSS Sphere

Traditionally, the web has been a static, two dimensional space. CSS allowed us to modify the width and height of elements on our websites, but it has been difficult to create a sense of depth without using lots of extra images, and creating motion has always been the realm of Flash or JavaScript. Happily, this is changing.

CSS3 provides us with a slew of new tools that allow us to do some fantastic things simply — things that would have required extra images at the least, or an entirely different language more commonly, to accomplish. And while browser support isn’t always the best for these new tools yet, sometimes it’s fun to play with what the web of tomorrow offers instead of dealing with the web of today or yesteryear.

Today, let’s start with something simple: we’ll turn a regular, blocky old element into a sphere. Read On…