A radial gradient is a graphical effect where colors are arranged in a circular or elliptical pattern. By default, the first color starts at the center position of the element and then fades to the end color towards the edge of the element. Fade happens at an equal rate until specified. We will see how we can achieve this effect in Tailwind CSS.
We can use the below approaches to achieve a Radial gradient in Tailwind CSS:
Table of Content
The Radial Gradient in Tailwind CSS as a Circle
A radial gradient as a circle will make a circle with a color and the other color fades to the end towards the edge. Fade happens at an equal rate until specified. The bg-[ ] is used to set the arbitrary value to the background. The radial-gradient() function is used to set the radial gradient.
Example: Implementation of using radial gradient in Tailwind CSS as a circle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>Radial Gradient</title>
<script src=
"https://cdn.tailwindcss.com"></script>
</head>
<body class="flex flex-col
items-center">
<h3 class="text-center
text-2xl
text-green-800">
Radial Gradient as a Circle
</h3>
<div class="container grid grid-cols-2 gap-8 p-4">
<div class="box border-4 border-red-600
bg-[radial-gradient(circle_at_center,
_var(--tw-gradient-stops))]
from-teal-300 via-gray-100
to-blue-300">
<h3 class="mb-4 p-12 text-2xl">
circle at center
</h3>
</div>
<div class="box border-4 border-red-600
bg-[radial-gradient(circle_at_top,
_var(--tw-gradient-stops))]
from-teal-300 via-gray-100
to-blue-300">
<h3 class="mb-4 p-12 text-2xl">
circle at Top
</h3>
</div>
<div
class="box border-4 border-red-600
bg-[radial-gradient(circle_at_bottom,
_var(--tw-gradient-stops))]
from-teal-300 via-gray-100 to-blue-300">
<h3 class="mb-4 p-12 text-2xl">
circle at bottom
</h3>
</div>
<div class="box border-4 border-red-600
bg-[radial-gradient(circle_at_top_left,
_var(--tw-gradient-stops))]
from-teal-300 via-gray-100
to-blue-300">
<h3 class="mb-4 p-12 text-2xl">
circle at top Left
</h3>
</div>
</div>
</body>
</html>
Output:
The Radial Gradient in Tailwind CSS as an Ellipse
A radial gradient as an ellipse will create an ellipse with a color and the other color fades to the end towards the edge. Fade happens at an equal rate until specified. The bg-[ ] class sets arbitrary background values, while the radial-gradient() function defines radial gradients with parameters like shape positions. Additionally, _var(--tw-gradient-stops) dynamically sets color stops. The color values like from-teal-300, via-gray-100, and to-blue-300 specify the color transitions within the radial gradients.
Example: Implementation of using radial gradient in Tailwind CSS as an Ellipse.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>Radial Gradient</title>
<script src=
"https://cdn.tailwindcss.com"></script>
</head>
<body class="flex flex-col
items-center">
<h3 class="text-center
text-2xl
text-green-800">
Radial Gradient as an Ellipse
</h3>
<div class="container grid
grid-cols-2 gap-8 p-4">
<div
class="box border-4 border-red-600
bg-[radial-gradient(ellipse_at_center,
_var(--tw-gradient-stops))]
from-teal-300 via-gray-100
to-blue-300">
<h3 class="mb-4 p-12 text-2xl">
Ellipse at center
</h3>
</div>
<div class="box border-4 border-red-600
bg-[radial-gradient(ellipse_at_top,
_var(--tw-gradient-stops))]
from-teal-300 via-gray-100
to-blue-300">
<h3 class="mb-4 p-12 text-2xl">
Ellipse at Top
</h3>
</div>
<div class="box border-4 border-red-600
bg-[radial-gradient(ellipse_at_bottom,
_var(--tw-gradient-stops))]
from-teal-300 via-gray-100
to-blue-300">
<h3 class="mb-4 p-12 text-2xl">
Ellipse at bottom
</h3>
</div>
<div class="box border-4 border-red-600
bg-[radial-gradient(ellipse_at_top_left,
_var(--tw-gradient-stops))]
from-teal-300 via-gray-100
to-blue-300">
<h3 class="mb-4 p-12 text-2xl">
Ellipse at top Left
</h3>
</div>
</div>
</body>
</html>
Output: