App & Browser Testing Made Easy

Give your users a seamless experience by testing on 3000+ real devices and browsers. Don't compromise with emulators and simulators

Get Started free
Home Guide Understanding CSS radial-gradient() function

Understanding CSS radial-gradient() function

By Gaveen Nayanajith, Community Contributor - June 20, 2023

In modern web development, HTML and CSS are the main building blocks for a website, even a simple one or a complex and extensive web application. 

  • From these scripting languages, CSS or the Cascading Style Sheet is used to style the web pages that HTML is scripting. 
  • So by using CSS, the developers can easily manipulate the pages and their styles through a block of code. 
  • In CSS, a way of making color styles called Gradients allows the user to display a smooth transition between two or even multiple specified colors.
Table of Contents

What is the CSS radial-gradient() function?

In CSS gradients, the radial gradients are used to define the colors of a pattern through the centre of the style. In CSS there are value functions, the statements that will invoke special data processing to return a specific CSS value for a specific CSS property. 

The radial-gradient() function creates an image as a radial gradient as a background image. 

The three main types of gradients are: 

  1. Linear Gradient: The colors go down/up, left/right, or diagonally to make the style
  2. Radial Gradient: The colors are defined through the centre of the style/pattern
  1. Conic Gradient: The colors are rotated around a centre point for the style. 

Read More: How to Create Browser Specific CSS Code

Importance of radial gradients in Web Design

The radial gradients provide a great way to beautify a webpage. The main importance of the radial gradient in  CSS is that it can create unique color effects to mimic a light source. A gradient is using gradual blending from one colour to another. The radial gradient can mimic the distance to the light source to make the image much more realistic by adding attributes such as blending points and/or colours.

How does a Radial Gradient work?

The radial gradient in CSS is defined by its center, so to create a radial gradient at least two colours should be defined. Apart from that, a few other attributes can be used to define the image further.  The next section will further elaborate on how those attributes can be used.

Also Read: How to use CSS rgba() function correctly?

Syntax and parameters of radial-gradient()

ValueDescription
shape Define the shape of the gradient. 
  • ellipse(default value)
  • circle
sizeDefine the size of the gradient. 
  • farthest-corner (default)
  • closest-side
  • closest-corner
  • farthest-side
positionDefine the start position of the gradient. The default is “centre”. 
start-color, last color (Color stops) Colour stops are the colours that are used to render smooth transitions. It may be used with a colour value and an optional stop point (a length along the gradient’s axis or a percentage within 0% and 100%).

Creating a basic radial-gradient

  • Simple Gradient: To create a simple gradient the following code can be used.
  • Non-centred Gradient: To create a non-centered gradient the start of the gradient can be specified as a location other than the center. To create a non-centered gradient, the following code can be used.
  • Circular Gradient: Since the circle is a type of ellipse with a uniform width and height, a simple radial gradient with equal horizontal and vertical proportions can be used or the “circle” keyword can also be used. To create a circular gradient the following code can be used. 

Radial gradient

How to create a background with a radial gradient?

The background-image tag for the body can be used to apply a radial gradient to the background for the body. The background radiant can be used to add a simple but elegant colour pattern for the web pages you are working on. 

Example: 

body {
background-image: radial-gradient(red, green, blue);
}

Browser Compatibility and Cendor prefixes

FunctionChromeEdgeFirefoxSafariOpera
radial-gradient()26.0

*10.0 -webkit-

10.016.0

3.6 -moz-*

6.1

5.1 -webkit-*

12.1

11.6 -o-

Note: This version supported to function with the vendor prefixes

Checking Compatibility across Different Browsers 

  1. To check the radial gradient and its compatibility across various browsers, BrowserStack Live can be used. 
  2. Once the folder is set up use the Local Testing with Live documentation to test your HTML design folders without first hosting them locally/internally. 
  3. The folder can be accessed through multiple web browsers so that the developers can test and evaluate the web pages using different browsers and browser versions by simply typing the link to the folder on the browser.
  4.  This method avoids the developing overhead of having actually to host the website. 

Use BrowserStack Live

Practical Examples and Use Cases

Designing buttons and backgrounds with radial gradients

The following code can be used with gradients with buttons:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radial Gradients</title>
<link rel="stylesheet" type="text/css" href="stylescript.css">
</head>
<body>
<h3>Simple Gradient</h3>
<div id="simple"></div>

<h3>Non-Centered Gradient</h3>
<div id="noncentered"></div>

<h3>Circular Gradient</h3>
<div id="circular"></div>

<h3>Gradient Button example</h3>
<div id="gradbtn">
<button id="btn-grad"> Grad Button! </button>
</div>
</body>
</html>
Tags
Automation Testing Cross browser testing

Featured Articles

How to use CSS rgba() function correctly?

Browser compatibility with CSS Gradients

App & Browser Testing Made Easy

Seamlessly test across 20,000+ real devices with BrowserStack