12 CSS conic-gradient Examples
Unlock circular designs previously only possible with SVG or complex hacks using CSS conic-gradient. This collection demonstrates how the conic-gradient() function distributes color stops around a central point, much like the hands of a clock. Explore practical examples ranging from creating data-driven pie charts and donut charts to building dynamic color pickers and intricate background patterns. The key advantage is generating these complex visuals with a single CSS property, making them lightweight, scalable, and easily animated using CSS Custom Properties.
Last updated:
CSS-Only Pattern: Squares in Squares
A tartan plaid pattern generated entirely with CSS.
Single Element Progress
Elegant, segmented radial charts that smoothly fill upon page load, showcasing the capabilities of modern CSS without JavaScript.
CSS Donut Chart for a File Manager UI
This component features a sophisticated donut chart created entirely with CSS, using a conic-gradient masked with a radial-gradient to create the arcs. The chart’s data is dynamically rendered from Pug variables into CSS Custom Properties, which then control the size and color of each segment.
CSS Blockquote with Gradient Drop Cap
A unique drop cap is created with modern CSS techniques - its complex background is generated by layering linear-gradient and repeating-conic-gradient, while its responsive size is managed by calc().
Fancy Corner Decoration for Images
A border effect for an <img> tag - the size of the decorative edge, created with repeating-conic-gradient and -webkit-mask, is dynamically calculated via a complex calc() function controlled by CSS variables.
Change Bass Color with Hue
A simple example of media control - a click event in vanilla JS is used both to control the HTML5 Audio API and to dynamically change the hue-rotate CSS filter.
CSS Knob Widget with Range Slider
A demonstration of the power of CSS and Sass - the knob is a standard range slider where the thumb is styled as a knob, and its transform: rotate is calculated based on the input’s value via CSS variables updated by JS.
Button
The main button has a semi-transparent background, the ::before pseudo-element contains the animated gradient, and ::after has a solid dark background that “cuts out” the inner part, leaving only the border visible.
Animated Border Gradient Glow
An animated rainbow border effect with a neon glow, implemented using @property, conic-gradient, and SVG filters. The @keyframes animation smoothly changes the --a CSS variable, which controls the hue in the conic-gradient, creating a continuous color transition.
ctrl+c ctrl+v Keys RGB
A decorative keyboard with a realistic press effect and dynamic, iridescent RGB backlighting, reminiscent of gaming keyboards.
Animate Single img Gradient Glow Border With CSS + SVG Filter Enhancement
An animated rainbow border with a neon glow, created using @property, repeating-conic-gradient, and SVG filters. The @keyframes CSS animation continuously changes the --a CSS variable, which controls the angle of the conic-gradient, creating a rotating rainbow effect.
The Half-Rombes Pattern
The use of the atan() function in SCSS to calculate the angles for a conic-gradient, which allows for the creation of a complex geometric pattern. The entire page background is set with a single background property, demonstrating the power and conciseness of modern CSS.
