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?
- Importance of radial gradients in Web Design
- How does a Radial Gradient work?
- Syntax and parameters of radial-gradient()
- Creating a basic radial-gradient
- How to create a background with a radial gradient?
- Browser Compatibility and Cendor prefixes
- Checking Compatibility across Different Browsers
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:
- Linear Gradient: The colors go down/up, left/right, or diagonally to make the style
- Radial Gradient: The colors are defined through the centre of the style/pattern
- 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()
| Value | Description |
|---|---|
| shape | Define the shape of the gradient.
|
| size | Define the size of the gradient.
|
| position | Define 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.
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
| Function | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| radial-gradient() | 26.0 *10.0 -webkit- | 10.0 | 16.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
- To check the radial gradient and its compatibility across various browsers, BrowserStack Live can be used.
- 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.
- 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.
- This method avoids the developing overhead of having actually to host the website.
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>
Was this post useful?
We're sorry to hear that. Please share your feedback so we can do better
Thanks a lot for your feedback!
