CSS - conic-gradient()

In CSS, the function conic-gradient() is useful in creating an image that contains a gradient with color transitions rotated around a center point. The resultant image is a special image, of <gradient> datatype.

The name given is conic, as the image looks like a cone from above, due to the color stops lighter on one side than the other.

Overview

  • A conic-gradient has no intrinsic dimensions, which means an image with no preferred size or aspect ratio.

  • The size of the image will match the size of the element it applies to or the size of the image.

  • The <gradient> datatype can be used only where <image>s are used.

  • The conic-gradient() function can not be used with <color> datatype and properties such as background-color.

  • In order to create a conic-gradient that repeats itself, you need to use the CSS function repeating-conic-gradient(), that fills a 360 degree rotation.

Possible Values

The function conic-gradient() can have following values as arguments:

1. <angle>: Value specifies the gradient rotation in clockwise direction. Takes the value as an angle and preceded by the keyword from.

2. <position>:

  • Determines the center of the gradient.

  • Uses the same length, order, and keywords as the background-position property.

  • When no value is specified, the default value set is center.

3. <angular-color-stop>: Consists of a color stop's <color> values, along with one or two optional values of stop positions, which is an angle along the gradient's circumference axis.

4. <color-hint>: Determines the gradient progression between adjacent color stops. When no value specified, midpoint of the color transition is the midpoint between two color stops.

Syntax

<conic-gradient()> = 
  conic-gradient( [ [ from <angle> ]? [ at <position> ]? ] || , 
  <color-interpolation-method> , <angular-color-stop-list> )

CSS conic-gradient() - Composition

The conic gradient is the progressive transition of two or more colors around a gradient arc, the circumference of a circle, instead of on the gradient line that startes from the center of the gradient.

  • The color transition happens around the center of the circle, starting at the top and going in clockwise direction.

  • A conic gradient is defined by indicating a rotation angle, center of the gradient, and lastly specifying a list of color stops.

  • The color stops are placed using the angle value, unlike the linear and radial gradient where the length and percentage values are given.

  • The units used to specify the value are deg for degrees, grad for gradians, rad for radians, and turn for turns. There are 360 degrees, 400 gradians, 2pie radians, and 1 turn in a circle.

  • The values for position of the gradient is similar to the syntax for 2-value background-position.

  • The circumference of the gradient is the arc of the gradient. The starting point of the gradient is the 12:00pm or the north. The rotation of the gradient is determined by the from angle in clockwise direction.

  • The angled color stops, their starting points and ending points, determines the colors of the gradient. Using the color hints between the adjacent colors' color stops, you can alter the transitions between colors.

conic-gradient-composition

The browsers that support conic gradients, accepts percentage values, where 100% equals 360 degrees.

CSS conic-gradient() - Customization

The gradients can be customized in many ways. You can add more angled color-stop points on the gradient arc, change the position of the color stop's using <angle>, moving the color transition midpoint to any point between the two color stops, via a color hint, etc.

Listing of color stops should be in ascending order. The subsequent color stops of lower value overrides the value of the previous color stop, resulting in a hard transition.

Not just circular figure, but checkerboards can be created too using the conic gradient.

CSS conic-gradient() - Basic Example

In order to create a basic conic gradient, you just need two colors. The center of the gradient is at 50% 50% mark, by default; with the start of the gradient is facing up. Lets us see an example:

<html>
<head>
<style>
   div {
      height: 150px;
      width: 150px;
   }

   .basic-conic-gradient {
      background: conic-gradient(red, yellow);
      border-radius: 50%;
   }
</style>
</head>
<body>
   <h1>Basic Conic Gradient</h1>
   <div class="basic-conic-gradient"></div>
</body>
</html>

CSS conic-gradient() - Positioning of Center

The center of the conic gradient can be positioned using the keyterms, percentage, or absolute lengths, with the keyword at. Let us see an example:

<html>
<head>
<style>
   div {
      height: 150px;
      width: 150px;
   }

   .position-center-gradient {
      background: conic-gradient(at 0% 20%, red 10%, gold 40%, green 50%);
   }
</style>
</head>
<body>
   <h1>Position Center Gradient</h1>
   <div class="position-center-gradient"></div>
</body>
</html>

CSS conic-gradient() - Angle Change

Following is an example of change in the angle.

<html>
<head>
<style>
   div {
      height: 150px;
      width: 150px;
   }

   .angle-change-gradient {
      background: conic-gradient(from 35deg, red 10%, gold 50%, green 75%, lightgreen);
      border-radius: 30%;
   }
</style>
</head>
<body>
   <h1>Angle Change Gradient</h1>
   <div class="angle-change-gradient"></div>
</body>
</html>

For more examples of conic-gradient(), click here.

Advertisements