Apply Cool Linear and Radial Gradients Using CSS

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.

15 Awesome CSS3-based Loading Animations

What are CSS3 Animations? CSS3 animations are quite powerful and many unimaginable animations can be created using CSS3. With a little knowledge of CSS3 one can create simple animations, and an in-depth knowledge of CSS3 can open doors for creating some really complex animations. We are all quite familiar with the loader shown on any […]

Read on...

Make Beautiful Hyperlinks Using CSS

A beautiful website design addresses every single aspect and element of the website, whether big or small. Small animations and beautifully designed elements can immensely improve the overall user experience and can take the whole design to a new level. Hyperlinks – or anchor tags – are an important element in any website and it’s […]

Read on...

The Very Best 4 (Active) CSS Lint Tools

Introduction Linting tools help improve the code quality and optimize it for better performance. Linting tools have sets of defined rules to verify the code, without actually executing the code. Web designers often overlook the CSS code quality and unstructured coding style. As the product grows, this can create a real mess and usually results […]

Read on...

Implement a Blur or Filter Effect on an Image Using CSS3

It’s very common to have different hover effects on HTML elements, especially on images. The power of CSS3 and modern browsers have made this easy to achieve. CSS3 filters are a powerful property to apply filters to images, just like photoshop filters. The filter CSS property lets you apply graphical effects like blurring, sharpening, or […]

Read on...

12 Awesome CSS Frameworks For Your Next Project

CSS (Cascading Style Sheet) is one of the most important tools in any website designers toolkit. In fact, without CSS, website design simply can’t function. Website designing has gone through massive changes over time, and HTML and CSS have come a long way. With the introduction of HTML 5 and CSS 3, website design has […]

Read on...

CSS Tool tips (Infotips) to Support Your Website Visitors

tooltip hover example

Tool tips are messages that appear when you hover your cursor over a word, hyperlink, image, icon, or any other element in a graphical user interface (GUI) or website. Also called an “infotip” and sometimes written as “tooltip”, these useful messages appear in a hover box, usually to describe the feature your mouse is hovering […]

Read on...

Create Responsive Navigation Bars for Desktop and Mobile Websites

Responsive Menus

With minimalist side design still on the rise, it’s sometimes easy for website visitors to get confused. Navigating a website should be easy and intuitive, and is one of the most important elements of a website. Using CSS, you can turn simple HTML menus into dynamic and aesthetically pleasing navigation bars. Responsive Design As the […]

Read on...

Bookmark These! 3 Great Resources for Free Images

free image resources

For any working and aspiring designers, purchasing stock images and assets are costly, especially when working on your own projects. Ideally we have someone else’s money to play with but we all know that’s not always the case. We have gathered 3 great resources for free images which come in handy when in need of textures […]

Read on...

A Solid Tool for Web Dev – Browser-Sync on a Mac

browsersync

What is Browser-Sync Browser-sync is a tool that helps synchronize your browser with any updates you make to the text file immediately after saving. Once you start coding more often, you get acclimated to adding code, refreshing the browser, and saving the files. Refreshing the browser manually can get laborious and just takes more time […]

Read on...