<p>Lists are the form of data representation commonly used by all types of documents. In HTML there are two types of lists namely ordered and unordered lists.&nbsp;</p>
<p>In an ordered list, the items are indicated by serial numbers or letters that are in some order. In an unordered list, the list items are indicated by various types of bullets viz., disc, circle, square, or by an image.&nbsp;</p>
<p>By default, the ordered list items are indicated by numbers and unordered list items by disc bullets.</p>
<pre class="language-markup"><code>&lt;!-- Unordered list --&gt;
&lt;ul&gt;
  &lt;li&gt;Item 1&lt;/li&gt;
  &lt;li&gt;Item 2&lt;/li&gt;
  &lt;li&gt;Item 3&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Ordered list --&gt;
&lt;ol&gt;
  &lt;li&gt;Item 1&lt;/li&gt;
  &lt;li&gt;Item 2&lt;/li&gt;
  &lt;li&gt;Item 3&lt;/li&gt;
&lt;/ol&gt;</code></pre>
<table style="border-collapse: collapse; width: 100.006%; margin-left: auto; margin-right: auto;" border="0">
<tbody>
<tr>
<td style="width: 48.0477%; text-align: left; vertical-align: top;">
<p><strong>Ordered list</strong></p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</td>
<td style="width: 48.0477%; text-align: left; vertical-align: top;">
<p><strong>Unordered list</strong></p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</td>
</tr>
</tbody>
</table>
<h2 style="text-align: center;">Styling list style types</h2>
<p>For styling lists, there are CSS list properties using which we can change the list style type, list position, and add an image as a list type nothing but the image as the bullet of the list item.</p>
<h3>CSS list property</h3>
<pre class="language-css"><code>ul, ol {
  /* list-style is a shorthand property */
  list-style: list-style-type list-style-position list-style-image
}</code></pre>
<ul>
<li><code>list-style-type</code> - to change the bullet styles of the list</li>
<li><code>list-style-position</code> - to change the position of the list, two values outside and inside</li>
<li><code>list-style-image</code> - to add an image as a bullet for the list, if the image fails to show then list-style-type will be shown</li>
</ul>
<p>So in order to change the bullet type for the list, we just need to use CSS list style type with the bullet we need. Let's see how to change the bullets for the list.</p>
<pre class="language-css"><code>/* Unordered list */
ul {
  list-style-type: '❤️';
  or /* list-style: '❤️'; */
}

/* Orderedlist */
ol {
  list-style: '👍'
}</code></pre>
<table style="border-collapse: collapse; width: 100.006%;" border="1">
<tbody>
<tr>
<td style="width: 48.0477%;">
<p><strong>Unordered list</strong></p>
<ul style="list-style: '❤️';">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</td>
<td style="width: 48.0477%;">
<p><strong>Ordered list</strong></p>
<ol style="list-style: '👍';">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</td>
</tr>
</tbody>
</table>
<p>Just by changing the CSS list style type value, we can change the bullets of any list. The possible value for the list style type can be anything, even language-specific letters, roman numerals, etc. To know various supported list style types in CSS head over to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type" target="_blank" rel="noopener">this MDN Docs</a>.</p>
<p>But using this way all the style types are going to be the same for all the items of the list. In order to customize style type for every individual item, we need to define it by using CSS at-rule, <code>@counter-style</code>.&nbsp;</p>
<h2 style="text-align: center;">Customize individual list style type</h2>
<p>Using <code>@counter-style</code> we can define the custom list style type for individual items of the list. It has so many properties for customizing the list. There are three important properties that we need to know to customize the list style types.</p>
<pre class="language-css"><code>@counter-style custom-type {
  system: cyclic;
  symbols: "😀";
  suffix: " ";
}

ul {
  list-style: custom-type;
  /*or list-style-type: custom-type; */
}</code></pre>
<ul>
<li><code>system</code> - defines how the list bullets should show. The possible values for it are: cyclic, numeric, alphabetic, symbolic, additive, or fixed, etc</li>
<li><code>symbols</code> - here is where you need to give different list style types you want to show for the list items. It can be numbers, alphabets, symbols, even images separated by a space</li>
<li><code>suffix</code> - usually, this one should be space, to have a space after the style type. Other than space you can have anything as a suffix.</li>
</ul>
<p>Let's see all the above in action.</p>
<pre class="language-markup"><code>&lt;!-- Unordered list --&gt;
&lt;ul&gt;
  &lt;li&gt;One&lt;/li&gt;
  &lt;li&gt;Two&lt;/li&gt;
  &lt;li&gt;Three&lt;/li&gt;
  &lt;li&gt;Four&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Ordered list --&gt;
&lt;ol&gt;
  &lt;li&gt;One&lt;/li&gt;
  &lt;li&gt;Two&lt;/li&gt;
  &lt;li&gt;Three&lt;/li&gt;
  &lt;li&gt;Four&lt;/li&gt;
&lt;/ol&gt;</code></pre>
<pre class="language-css"><code>/* style type for unordered list */
@counter-style custom-unordered {
  system: cyclic;
  symbols:  '❓' '✌️' '❤️' ;
  suffix: ' ';
}

/* style type for ordered list */
@counter-style custom-ordered {
  system: fixed;
  symbols: '➡️' '😀' '👍';
  suffix: ' ';
}

ul {
  list-style: custom-unordered;
  /* or list-style-type: custom-unordered; */
}
ol {
  list-style-type: custom-ordered;
}</code></pre>
<table style="border-collapse: collapse; width: 100.006%;" border="1">
<tbody>
<tr>
<td style="width: 48.0477%;">
<p><strong>Unordered list</strong></p>
<ul style="list-style: custom-unordered;">
<li>One</li>
<li>Two&nbsp;</li>
<li>Three</li>
<li>Four</li>
</ul>
</td>
<td style="width: 48.0477%;">
<p><strong>Ordered list</strong></p>
<ol style="list-style-type: custom-ordered;">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
</td>
</tr>
</tbody>
</table>
<p>So using the @counter-style that is how we can add individual list style types. If you see when <code>system</code> is defined as <code>cyclic</code> the same list style type repeats after all types are done, and when it is <code>fixed</code> the style type for the item number more than the number of symbols defined, get the default style type i.e., a number for the ordered list and disc for the unordered list.</p>
<p>You need <code>system</code> value as <code>fixed</code> only when you know that the number of items are fixed else it's better to go for <code>cyclic</code> or any other type.&nbsp;</p>
<p>That is all about styling the individual list item types using CSS.</p>

Using CSS list style type you can change the style type of all items in the list. Here's how you can change the style type for individual items in the list

Sample excerpt

How to customize CSS list style type of each item?

<p>CSS gradients are nothing but the color gradients using CSS. A color gradient or a color transition is the gradual blending of colors from one color to the other color. This color transition can happen between a minimum of two colors to any number of colors.</p>
<p>CSS is a styling language for HTML markup and so it deals with the colors.&nbsp;</p>
<p>In CSS there are three types of color gradients:</p>
<ol>
<li>Linear gradient</li>
<li>Radial gradient</li>
<li>Conic gradient</li>
</ol>
<p>Let's see how to generate each type of CSS gradient.</p>
<h2>1. CSS linear gradient</h2>
<p>A linear gradient is a color gradient where the transition of colors happen linearly. To generate a linear gradient at least two colors are needed and these are often called <strong>color stops</strong>.&nbsp;</p>
<p>Though linear gradients are linear we can choose the direction of this linearity, it could be horizontal, vertical, diagonal, or in the specific angle direction.&nbsp;</p>
<p>To generate a linear gradient using CSS we use the <code>linear-gradient</code> CSS function with a minimum of two arguments. This linear gradient value is assigned to the background-image property of CSS.</p>
<pre class="language-css"><code>background-image: linear-gradient([direction], color-stop1, color-stop2, ...);</code></pre>
<p>In the above CSS snippet, the default direction is top to bottom and so it can be omitted if we want to go by default direction. <em>The color stops can be of any valid CSS colors e.g., blue, #0000FF, rgb(0, 0, 255), rgba(0, 0, 255, 0.2) etc for all types of gradients in CSS.</em></p>
<p>Let's see an example.</p>
<pre class="language-markup"><code>&lt;!-- HTML that we consider for all linear-gradients --&gt;
&lt;div class="box" style="width: 100%; height: 75px"&gt;&lt;/div&gt;</code></pre>
<pre class="language-css"><code>.box {
  background-image: linear-gradient(blue, red);
}</code></pre>
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="background-image: linear-gradient(blue, red); height: 75px; width: 100%; text-align: center;"><span style="color: #ecf0f1;">(from top) to bottom (default)</span></td>
</tr>
</tbody>
</table>
<p>We can see that the linear gradient from blue to red is applied in the default direction from top to bottom.</p>
<h3><strong>The available values for the direction are:</strong></h3>
<p><strong>For horizontal &amp; vertical: </strong>to right, to left, to bottom, to top</p>
<p><strong>For diagonal: </strong>to bottom right, to bottom left, to top right, to top left</p>
<p><strong>For angle: </strong>(0 to 360)deg</p>
<h4><strong>Example for a horizontal gradient:</strong></h4>
<pre class="language-css"><code>.box {
  background-image: linear-gradient(to right, blue, red);
}</code></pre>
<table style="border-collapse: collapse; width: 100.006%;" border="1">
<tbody>
<tr>
<td style="width: 97.9764%; height: 75px; background-image: linear-gradient(to right, blue, red); text-align: center;"><span style="color: #ecf0f1;">(from left) to right</span></td>
</tr>
</tbody>
</table>
<p>---</p>
<h4><strong>Example for more than two colors' gradient:</strong></h4>
<pre class="language-css"><code>.box {
  background-image: linear-gradient(to top, blue, red, yellow);
}</code></pre>
<table style="border-collapse: collapse; width: 100.006%;" border="1">
<tbody>
<tr>
<td style="width: 97.9764%; height: 75px; background-image: linear-gradient(to top, blue, red, yellow); text-align: center;"><span style="color: #ecf0f1;">(from bottom) to top</span></td>
</tr>
</tbody>
</table>
<p>---</p>
<h4><strong>Example for a diagonal gradient:</strong></h4>
<pre class="language-css"><code>.box {
  background-image: linear-gradient(to bottom right, blue, red);
}</code></pre>
<table style="border-collapse: collapse; width: 100.006%;" border="1">
<tbody>
<tr>
<td style="width: 97.9764%; background-image: linear-gradient(to right bottom, blue, red); height: 75px; text-align: center;"><span style="color: #ecf0f1;">(from top left) to bottom right</span></td>
</tr>
</tbody>
</table>
<p>---</p>
<h4><strong>Example for an angle gradient:</strong></h4>
<p>The angle direction will be clockwise and it starts from the top like 12'O clock. So 0deg is equivalent to <code>to top</code>, 90deg equivalent to <code>to right</code>, 180deg equivalent to <code>to bottom</code> and so on.</p>
<pre class="language-css"><code>.box {
  background-image: linear-gradient(120deg, blue, red);
}
</code></pre>
<table style="border-collapse: collapse; width: 100.006%;" border="1">
<tbody>
<tr>
<td style="width: 97.9764%; height: 75px; background-image: linear-gradient(120deg, blue, red); text-align: center;"><span style="color: #ecf0f1;">120deg(towards bottom)</span></td>
</tr>
</tbody>
</table>
<p>---</p>
<h4><strong>Example for a specific color-stop location gradient:</strong></h4>
<p>You can specify the location of the color stop explicitly by percentage or in px after the color. This value can be negative in order to start the transition much before the starting point and can be more than 100% to end the transition far after the ending point.</p>
<pre class="language-css"><code>.box {
  background-image: linear-gradient(to right, blue 60%, red 110%);
}</code></pre>
<table style="border-collapse: collapse; width: 100.006%;" border="1">
<tbody>
<tr>
<td style="width: 97.9764%; height: 75px; background-image: linear-gradient(to right, blue 60%, red 110%); text-align: center;"><span style="color: #ecf0f1;">to right (color stop location 60% for blue and 110% for red)</span></td>
</tr>
</tbody>
</table>
<pre class="language-css"><code>.box {
  background-image: linear-gradient(to right, blue -30%, red 90%);
}</code></pre>
<table style="border-collapse: collapse; width: 100.006%;" border="1">
<tbody>
<tr>
<td style="width: 97.9764%; height: 75px; background-image: linear-gradient(to right, blue -30%, red 90%); text-align: center;"><span style="color: #ecf0f1;">to right (color stop location -30% for blue, 90% for red)</span></td>
</tr>
</tbody>
</table>
<p>---</p>
<h4>Example for a hard-lined linear gradient:</h4>
<pre class="language-css"><code>.box {
  background-image: linear-gradient(to right, blue 50%, red 50%);
}</code></pre>
<table style="border-collapse: collapse; width: 100.006%;" border="1">
<tbody>
<tr>
<td style="width: 97.9764%; height: 75px; background-image: linear-gradient(to right, blue 50%, red 50%); text-align: center;"><span style="color: #ecf0f1;">to right(hard lined)</span></td>
</tr>
</tbody>
</table>
<p>---</p>
<h4>Example for creating color bands with two color stops:</h4>
<p>You can have multiple stops for the color indicating the start and stop. Using this method you can create bands of colors.</p>
<pre class="language-css"><code>.box {
  background-image: linear-gradient(
    to right,
    blue 25%,
    red 25%,
    red 50%,
    green 50%,
    green 75%,
    yellow 75%
  );
}</code></pre>
<table style="border-collapse: collapse; width: 100.006%;" border="1">
<tbody>
<tr>
<td style="width: 97.9764%; height: 75px; background-image: linear-gradient(to right,blue 25%,red 25%,red 50%,green 50%, green 75%,yellow 75%); text-align: center;"><span style="color: #ecf0f1;">to right(blue, red, green, yellow bands)</span></td>
</tr>
</tbody>
</table>
<p>---</p>
<h4><strong>Example for a repeating linear gradient:</strong></h4>
<p>We can repeat the linear gradient by using <code>repeating-linear-gradient</code> function, instead of <code>linear-gradient</code>.</p>
<pre class="language-css"><code>.box {
  background-image: repeating-linear-gradient(to right, blue 20%, red 40%);
}</code></pre>
<table style="border-collapse: collapse; width: 100.006%;" border="1">
<tbody>
<tr>
<td style="width: 97.9764%; height: 75px; background-image: repeating-linear-gradient(to right, blue 20%, red 40%); text-align: center;"><span style="color: #ecf0f1;">repeating linear gradient</span></td>
</tr>
</tbody>
</table>
<p>And that is all about linear gradients in CSS. Let's see CSS radial gradients.</p>
<p>&nbsp;</p>
<h2>2. CSS radial gradient</h2>
<p>A radial gradient is a color gradient where the transition of colors happen in a radial fashion i.e., the colors transition from a central point.</p>
<p>To generate a radial gradient at least two colors are needed just like the linear gradient.</p>
<p>Radial gradiants can be made circular or elliptical. By <strong>default</strong>, the center of the <strong>gradient</strong> is at the <strong>50% 50%</strong> mark, shape is <strong>elliptical</strong>, size is <strong>farthest-corner</strong>.&nbsp;</p>
<pre class="language-css"><code>background-image: radial-gradient([shape size at position], color-stop1, color-stop2, ...);</code></pre>
<p>Let's see an example</p>
<pre class="language-markup"><code>&lt;!-- HTML that we consider for all radial-gradients --&gt;
&lt;div class="box" style="width: 100%; height: 100px"&gt;&lt;/div&gt;</code></pre>
<pre class="language-css"><code>.box {
    background-image: radial-gradient(blue, red);
}</code></pre>
<table style="border-collapse: collapse; width: 100.006%;" border="1">
<tbody>
<tr>
<td style="width: 97.9764%; height: 100px; background-image: radial-gradient(blue, red); text-align: center;"><span style="color: #ecf0f1;">elliptical farthest-corner, center</span></td>
</tr>
</tbody>
</table>
<p>The <strong>possible values for the shape</strong> are <code>circle</code> and <code>ellipse</code></p>
<p>The <strong>possible values for the radiance or gradient size</strong> are:&nbsp;</p>
<ul>
<li>closest-side</li>
<li>farthest-side</li>
<li>closest-corner</li>
<li>farthest-corner</li>
</ul>
<p>For <strong>circle</strong> size can be given in terms of <strong>length</strong>(px, rem, em). e.g., circle 50px</p>
<p>For <strong>ellipse</strong> size can be given in terms of <strong>length or percentage</strong>. e.g., ellipse 100px, 30px, first length/percentage indicates horizontal radius and the second length/percentage indicates vertical radius of the ellipse.</p>
<p>Similar to the linear-gradient, we can choose the color stop location with a percentage or length after the color.&nbsp;</p>
<p>Let's see examples for each type of radial gradient.</p>
<h4>Example for a circle shaped radial-gradient:</h4>
<pre class="language-css"><code>.box {
  /* default size and position will be considered */
  background: radial-gradient(circle, blue, red);
}</code></pre>
<table style="border-collapse: collapse; width: 100.006%;" border="1">
<tbody>
<tr>
<td style="width: 97.9764%; height: 100px; background: radial-gradient(circle, blue, red); text-align: center;"><span style="color: #ecf0f1;">circle shape radial gradient</span></td>
</tr>
</tbody>
</table>
<p>---</p>
<h4>Example for a radial gradient with shape, size and position:</h4>
<pre class="language-javascript"><code>.box {
  background: radial-gradient(circle closest-side at 20% 50%, blue, red);
}</code></pre>
<table style="border-collapse: collapse; width: 100.006%;" border="1">
<tbody>
<tr>
<td style="width: 97.9764%; height: 100px; background: radial-gradient(circle closest-side at 20% 50%, blue, red); text-align: center;"><span style="color: #ecf0f1;">circle shape radial gradient with closest-side size</span></td>
</tr>
</tbody>
</table>
<p>---</p>
<h4>Example for a radial gradient with circle length:</h4>
<pre class="language-css"><code>.box {
  /* default position is considered, 50px is the size, circle is the shape */
  background: radial-gradient(circle 50px, royalBlue 10%, Cyan 20%, Tomato 60%, SpringGreen);
}
</code></pre>
<table style="border-collapse: collapse; width: 100.006%;" border="1">
<tbody>
<tr>
<td style="width: 97.9764%; height: 100px; background: radial-gradient(circle 50px, royalBlue 10%, Cyan 20%, Tomato 60%, SpringGreen); text-align: center;">&nbsp;</td>
</tr>
</tbody>
</table>
<p>If you are wondering how to know those different color names for direct use, then you can have a look at this <a href="https://devapt.com/color-names-hex-color-codes" target="_blank" rel="noopener">CSS color names to use directly</a> article.</p>
<p>---</p>
<h4>Example for a repeating radial gradient:</h4>
<p>Just like in linear gradient we can also have repeating transitions of radial gradient using <code>repeating-radial-gradient</code> CSS function. All the parameters remain just like the normal radial gradient.</p>
<pre class="language-css"><code>.box {
  /* 20px 10px is the size of the ellipse and default position center */
  background: repeating-radial-gradient(ellipse 20px 10px, royalBlue 10%, Cyan 20%, Tomato 60%, SpringGreen);
}</code></pre>
<table style="border-collapse: collapse; width: 100.006%;" border="1">
<tbody>
<tr>
<td style="width: 97.9764%; height: 100px; background: repeating-radial-gradient(ellipse 20px 10px, royalBlue 10%, Cyan 20%, Tomato 60%, SpringGreen); text-align: center;"><span style="color: #000000; background-color: #ecf0f1;">&nbsp;repeating radial gradient in ellipse shape&nbsp;</span></td>
</tr>
</tbody>
</table>
<p>That is all about radial-gradients in CSS. Let's go to the last CSS gradient type conic.</p>
<p>&nbsp;</p>
<h2>3. CSS conic gradient</h2>
<p>A conic gradient is a color gradient where the transition of colors happen in a rotated fashion i.e., the colors transition at angles from a point.</p>
<p>To generate a conic gradient at least two colors are needed just like the linear and radial gradient.</p>
<p>By <strong>default</strong>, the position of the gradient is at 50% 50% mark or at&nbsp; <strong>center</strong> and starting or from angle is <strong>0deg</strong>. These degrees start from top, like starting from 12'O clock in clockwise direction.&nbsp;</p>
<pre class="language-css"><code>background-image: conic-gradient([from angle] [at position,] color-stop1 [deg], color-stop2 [deg], ...);</code></pre>
<p>Let's see a quick example of this conic gradient:</p>
<pre class="language-markup"><code>&lt;!-- HTML that we consider for all conic-gradients --&gt;
&lt;div class="box" style="width: 100px; height: 100px"&gt;&lt;/div&gt;</code></pre>
<pre class="language-css"><code>.box {
  background: conic-gradient(blue, red);
}</code></pre>
<table class="flex justify-center w-fit" style="border-collapse: collapse; margin-left: auto; margin-right: auto;" border="1">
<tbody>
<tr>
<td style="width: 100px; height: 100px; background: conic-gradient(blue, red); text-align: center;">&nbsp;</td>
</tr>
</tbody>
</table>
<p style="text-align: center;"><strong>Conic gradient with default position and angle</strong></p>
<p>In the above conic gradient we can see the gradient position at center and the starting angle 0deg.&nbsp;</p>
<p>The possible values of <strong>from angle</strong> are: (0-360)deg</p>
<p>The possible values of<strong> position</strong> of the conic gradient are in percentage or in pixels.</p>
<p>e.g.,50% 50%.</p>
<p>Let's see examples for each type of conic gradient.</p>
<h4>Example for a conic gradient with more than two colors:</h4>
<pre class="language-css"><code>.box {
  /* default angle 0deg, position center */
  background: conic-gradient(blue, red, green, tomato, hotpink);
}</code></pre>
<table class="flex justify-center w-fit" style="border-collapse: collapse; margin-left: auto; margin-right: auto;" border="1">
<tbody>
<tr>
<td style="width: 100px; height: 100px; background: conic-gradient(blue, red, green, tomato, hotpink); text-align: center;">&nbsp;</td>
</tr>
</tbody>
</table>
<p style="text-align: center;"><strong>Multi colored conic gradient</strong></p>
<p>---</p>
<h4>Example for a conic gradient with color stop degrees:</h4>
<pre class="language-css"><code>.box {
  background: conic-gradient(blue 60deg, red 120deg, green 270deg);
}</code></pre>
<table class="flex justify-center w-fit" style="border-collapse: collapse; margin-left: auto; margin-right: auto;" border="1">
<tbody>
<tr>
<td style="width: 100px; height: 100px; background: conic-gradient(blue 60deg, red 120deg, green 270deg); text-align: center;">&nbsp;</td>
</tr>
</tbody>
</table>
<p style="text-align: center;"><strong>Conic gradient with color stop angles</strong></p>
<p>---</p>
<h4>Example for conic gradient with initial degree and position:</h4>
<pre class="language-css"><code>.box {
  background: conic-gradient(from 90deg at 60% 40%, blue 60deg, red 120deg, green 270deg);
}</code></pre>
<table class="flex justify-center w-fit" style="border-collapse: collapse; margin-left: auto; margin-right: auto;" border="1">
<tbody>
<tr>
<td style="width: 100px; height: 100px; background: conic-gradient(from 90deg at 60% 40%, blue 60deg, red 120deg, green 270deg); text-align: center;">&nbsp;</td>
</tr>
</tbody>
</table>
<p style="text-align: center;"><strong>Conic-gradient with a specific from angle and position</strong></p>
<p>---</p>
<h4>Example for a conic gradient pie-chart:</h4>
<p>You can create a pie-chart with the help of conic gradient. By using start and stop, color stops for each color we can create hard-lined separations. This is something like the color band that we have seen in linear-gradients, but this one will be in degrees. And to make it appear like a circle instead of a square, we just need to make the border-radius to 50%.</p>
<pre class="language-css"><code>.box {
  background: conic-gradient(from 90deg, blue 120deg, red 120deg, red 240deg, green 240deg, green 360deg);
  border-radius: 50%;
}</code></pre>
<table class="flex justify-center w-fit" style="border-collapse: collapse; margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="width: 100px; height: 100px; background: conic-gradient(from 90deg, blue 120deg, red 120deg, red 240deg, green 240deg, green 360deg); border-radius: 50%; text-align: center;">&nbsp;</td>
</tr>
</tbody>
</table>
<p style="text-align: center;"><strong><span style="color: #000000;">Pie-chart with conic gradient</span></strong></p>
<p><span style="color: #000000;">---</span></p>
<h4>Example for a repeating conic gradient:</h4>
<p>Just like in linear and radial gradients we can also have repeating transitions of conic gradient using <code>repeating-conic-gradient</code> CSS function. All the parameters remain just like the normal conic gradient.</p>
<pre class="language-css"><code>.box {
  background: repeating-conic-gradient(blue 30deg, red 90deg); 
  border-radius: 50%;
}</code></pre>
<table class="flex justify-center w-fit" style="border-collapse: collapse; margin-left: auto; margin-right: auto;" border="1">
<tbody>
<tr>
<td style="width: 100px; height: 100px; background: repeating-conic-gradient(blue 30deg, red 90deg); border-radius: 50%; text-align: center;">&nbsp;</td>
</tr>
</tbody>
</table>
<p style="text-align: center;"><strong><span style="color: #000000;">Repeating conic gradient in a circle shape</span></strong></p>
<p>And that is all about different types of CSS gradients. Hope this article has given a clear insight in generating gradients with CSS.&nbsp;</p>

CSS gradients are the color gradients using CSS. There are three types of color gradients in CSS. Linear gradient, radial gradient and conic gradient.

Posts tagged with CSS

How to customize CSS list style type of each item?

CSS gradients linear, radial & conic all you need to know about