For working professionals
For fresh graduates
More
1. Introduction
6. PyTorch
9. AI Tutorial
10. Airflow Tutorial
11. Android Studio
12. Android Tutorial
13. Animation CSS
16. Apex Tutorial
17. App Tutorial
18. Appium Tutorial
21. Armstrong Number
22. ASP Full Form
23. AutoCAD Tutorial
27. Belady's Anomaly
30. Bipartite Graph
35. Button CSS
39. Cobol Tutorial
46. CSS Border
47. CSS Colors
48. CSS Flexbox
49. CSS Float
51. CSS Full Form
52. CSS Gradient
53. CSS Margin
54. CSS nth Child
55. CSS Syntax
56. CSS Tables
57. CSS Tricks
58. CSS Variables
61. Dart Tutorial
63. DCL
65. DES Algorithm
83. Dot Net Tutorial
86. ES6 Tutorial
91. Flutter Basics
92. Flutter Tutorial
95. Golang Tutorial
96. Graphql Tutorial
100. Hive Tutorial
103. Install Bootstrap
107. Install SASS
109. IPv 4 address
110. JCL Programming
111. JQ Tutorial
112. JSON Tutorial
113. JSP Tutorial
114. Junit Tutorial
115. Kadanes Algorithm
116. Kafka Tutorial
117. Knapsack Problem
118. Kth Smallest Element
119. Laravel Tutorial
122. Linear Gradient CSS
129. Memory Hierarchy
133. Mockito tutorial
134. Modem vs Router
135. Mulesoft Tutorial
136. Network Devices
138. Next JS Tutorial
139. Nginx Tutorial
141. Octal to Decimal
142. OLAP Operations
143. Opacity CSS
144. OSI Model
145. CSS Overflow
146. Padding in CSS
148. Perl scripting
149. Phases of Compiler
150. Placeholder CSS
153. Powershell Tutorial
158. Pyspark Tutorial
161. Quality of Service
162. R Language Tutorial
164. RabbitMQ Tutorial
165. Redis Tutorial
166. Redux in React
167. Regex Tutorial
170. Routing Protocols
171. Ruby On Rails
172. Ruby tutorial
173. Scala Tutorial
175. Shadow CSS
178. Snowflake Tutorial
179. Socket Programming
180. Solidity Tutorial
181. SonarQube in Java
182. Spark Tutorial
189. TCP 3 Way Handshake
190. TensorFlow Tutorial
191. Threaded Binary Tree
196. Types of Queue
197. TypeScript Tutorial
198. UDP Protocol
202. Verilog Tutorial
204. Void Pointer
205. Vue JS Tutorial
206. Weak Entity Set
207. What is Bandwidth?
208. What is Big Data
209. Checksum
211. What is Ethernet
214. What is ROM?
216. WPF Tutorial
217. Wireshark Tutorial
218. XML Tutorial
The presentation and layout of HTML documents are managed using the stylesheet language known as CSS (Cascading Style Sheets). Making online sites aesthetically pleasing and user-friendly, CSS enables web developers to apply styles (such as colors, fonts, spacing, and positioning) to HTML elements. CSS gradients are used to make smooth color transitions making the website more appealing. In this tutorial, we will learn about the different types of CSS gradients using practical examples.
CSS gradients enable you to create smooth color transitions between two or more colors rather than using a single solid color. Gradients are excellent for giving your website design visual depth and richness since they create dynamic backgrounds, buttons, or other elements.
Backgrounds, buttons, and borders are just a few of the items on your website that can be decorated with CSS gradients. Gradients can be customized with various color stops and placements and offer visual attractiveness. They provide a strong technique to improve your site design and produce interesting user experiences and are extensively supported by contemporary browsers.
Instead of utilizing a single solid color, CSS gradients let you make seamless color transitions between two or more colors. As they produce dynamic backdrops, buttons, or other items, gradients are great for adding visual depth and richness to your website design.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#gradient {
background-image: linear-gradient(red, green, blue, white);
height: 200px;
width: 320px;
color: white;
}
</style>
</head>
<body>
<div id="gradient">Linear gradient for 4 colors from top to bottom</div>
</body>
</html>
Web designers frequently choose CSS gradients because of their many advantages and practical applications. The following are some justifications for employing CSS gradients:
In this portion of the tutorial, we will discuss the different types of gradients in CSS through examples.
The most typical kind of gradient is a linear gradient. The gradient axis can be adjusted to run vertically, horizontally, diagonally, or at any other angle.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#gradient {
background-image: linear-gradient(green, lightgreen, white);
height: 200px;
width: 320px;
color: #b2ffff;
}
</style>
</head>
<body>
<div id="gradient">Linear Gradient</div>
</body>
</html>
Straight-line color transitions are produced by linear gradients. Use the terms "to top," "to bottom," "to right," "to left," "to top right," etc. to describe the gradient's direction or enter an angle (in degrees) instead.
An ellipse or circular-shaped radial gradient is a sort of CSS gradient that produces a seamless color transition from a center point outward. The defined shape's edges are covered with colors that radiate outward from the center. The creation of round or rounded components with multiple color variations makes use of radial gradients particularly well.
Syntax: background-image: radial-gradient(shape size at position, start-color, transitioning colors, ..., last-color);
Example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#radialgradient {
background-image: -webkit-radial-gradient(white,blue); /*For Safari & Chrome 10+*/
background-image: -o-radial-gradient(white, yellow); /*For Opera */
background-image: -moz-radial-gradient(white,blue); /*For Firefox */
background-image: radial-gradient( white, yellow); /*Standard Syntax*/
height: 400px;
width: 450px;
text-align: center;
}
</style>
</head>
<body>
<div id="radialgradient"><h2>Radial Gradient</h2></div>
</body>
</html>
Here, we will discuss different types of linear gradients with the help of examples.
You can use the linear-gradient() function keyword to produce a linear gradient that flows smoothly from the top to the bottom of an element. This will guarantee that the gradient runs vertically through the element, from top to bottom.
Syntax: background-image: linear-gradient(red, white);
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#linear-top-bottom-grad {
height: 400px;
width: 550px;
background: -webkit-linear-gradient(blue, lightred); /* For Safari*/
background: -o-linear-gradient(blue, lightred); /* For Opera 11.1*/
background: -moz-linear-gradient(blue, lightred); /* For Firefox */
background: linear-gradient(blue, lightgreen); /* Standard syntax */
}
</style>
</head>
<body>
<h3>Linear Gradient - Top to Bottom</h3>
<p>This linear gradient starts at the top. It starts as blue, then transitions to light green:</p>
<div id="linear-top-bottom-grad"></div>
</body>
</html>
You can use the linear-gradient(to right,.....) function keyword to produce a linear gradient that flows smoothly from the left to right of an element. This will guarantee that the gradient runs horizontally through the element, from left to right.
Syntax: background-image: linear-gradient(to right,red, white);
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#linear-left-right-grad {
height: 400px;
width: 550px;
background: -webkit-linear-gradient(left, lightgreen, green); /* For Safari*/
background: -o-linear-gradient(right, lightgreen, green); /* For Opera*/
background: -moz-linear-gradient(right, lightgreen, green); /* For Firefox*/
background: linear-gradient(to right, lightgreen , green); /* General syntax*/
}
</style>
</head>
<body>
<h3>Linear Gradient - Left to Right</h3>
<p>This linear gradient starts at the left. It starts as lightgreen, and then transitions to green:</p>
<div id="linear-left-right-grad"></div>
</body>
</html>
You can use the linear-gradient(to bottom right,.....) function keyword to produce a linear gradient that flows smoothly from the top left to the bottom right of an element. This will guarantee that the gradient runs diagonally through the element, from left to right.
Syntax: background-image: linear-gradient(to bottom right,red, white);
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#linear-diagonal-grad {
height: 400px;
width: 550px;
background: -webkit-linear-gradient(left top, red , purple); /* For Safari */
background: -o-linear-gradient(bottom right, red, purple); /* For Opera */
background: -moz-linear-gradient(bottom right, red, purple); /* For Firefox */
background: linear-gradient(to bottom right, red , purple); /* General syntax */
}
</style>
</head>
<body>
<h3>Linear Gradient - Diagonal</h3>
<p>This linear gradient starts at top left. It starts out as red, then transitions to purple:</p>
<div id="linear-diagonal-grad"></div>
</body>
</html>
Here, we will discuss the different types of radial CSS gradients with the help of examples.
Radial gradients with evenly spaced color stops are the default CSS radial gradient. Using the necessary parameters, the radial-gradient() method can be used to produce a radial gradient in CSS. A circular or elliptical-shaped radial gradient produces a seamless color shift from a center point outward.
Syntax: background: radial-gradient(color1,.....);
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#radial-grad {
height: 400px;
width: 550px;
background: -webkit-radial-gradient(blue, lightblue, violet); /* Safari */
background: -o-radial-gradient(blue, lightblue, violet); /* For Opera */
background: -moz-radial-gradient(blue, lightblue, violet); /* For Firefox */
background: radial-gradient(blue, lightblue, violet); /* General syntax */
}
</style>
</head>
<body>
<h3>Default Radial Gradient - Evenly Spaced Color Stops with blue, lightblue ,and violet</h3>
<div id="radial-grad"></div>
</body>
</html>
Using the necessary parameters, the radial-gradient(color1%,color2%,..) method can be used to produce a radial gradient with differently spaced color stops in CSS. A circular or elliptical-shaped radial gradient produces a seamless color shift from a center point outward.
Syntax: background: radial-gradient(blue 5%, violet 15%, red 60%);
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#differently-spaced-radial-grad {
height: 400px;
width: 550px;
background: -webkit-radial-gradient(blue 5%, violet 15%, red 60%); /* For Safari */
background: -o-radial-gradient(blue 5%, violet 15%, red 60%); /* For Opera */
background: -moz-radial-gradient(blue 5%, violet 15%, red 60%); /* For Firefox */
background: radial-gradient(blue 5%, violet 15%, red 60%); /* General syntax */
}
</style>
</head>
<body>
<h3>Default Radial Gradient - Differently Spaced Color Stops with blue, violet ,and red</h3>
<div id="differently-spaced-radial-grad"></div>
</body>
</html>
CSS gradients are widely supported in contemporary web browsers as of my most recent update in September 2021. CSS gradients are completely supported by all popular browsers, including Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, and Opera. The support features radial and linear gradients.
The supported browser versions are listed below:
Remember that CSS gradients are frequently used, and if you need to support legacy systems, it's a good idea to verify compatibility with earlier browser versions. However, you don't need to worry too much about browser support when using CSS gradients in the majority of web development cases.
Overall, CSS gradients provide a potent and effective method of including aesthetically pleasing color effects in your website design without the requirement for additional picture resources. You may design cutting-edge, aesthetically beautiful websites that engage your audience by understanding the use of gradients.
A linear gradient can have its direction changed by using angles or verbs like "to top," "to bottom," etc. You can use “at position” to specify the position for radial gradients. Example:” to right”,” circle at center”,”45deg”.
We can use linear gradient in react native as a component to perform this in mobile app development.
Author
Talk to our experts. We are available 7 days a week, 9 AM to 12 AM (midnight)
Indian Nationals
1800 210 2020
Foreign Nationals
+918045604032
1.The above statistics depend on various factors and individual results may vary. Past performance is no guarantee of future results.
2.The student assumes full responsibility for all expenses associated with visas, travel, & related costs. upGrad does not provide any a.