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.
19 CSS conic-gradient Examples
Rounded Triangle CSS Image Mask
demo & codeThis Rounded Triangle CSS Image Mask offers a mathematically perfect way to shape visuals into equilateral triangles with soft, professional edges. It is an ideal choice for high-end portfolio galleries, creative team sections, or landing pages where standard rectangular or circular crops feel too conventional. By leveraging modern CSS math, the shape remains perfectly symmetrical regardless of the image dimensions.
Beveled Corner Glow Cards
demo & codeThis Beveled Corner Glow Card component demonstrates the bleeding edge of CSS UI styling. It primarily utilizes the new corner-shape property to create chamfered (angled) edges without complex clip-paths, while implementing a sophisticated CSS Mask fallback for older engines. The interaction features a “scanning” light beam effect on the border, powered by CSS Houdini for buttery smooth interpolation.
Bicycle
A pure CSS bicycle illustration constructed from geometric primitives using absolute positioning and vmin units for responsiveness. conic-gradient simulates wheel spokes, transform: skewX shapes the frame, and inset box-shadow adds depth, while pseudo-elements efficiently duplicate components like wheels.
See the Pen Bicycle.
Images Inside Wiggly Boxes
A decorative image frame created entirely with CSS mask compositing. It combines radial-gradient layers with conic-gradient and the intersect composite operator to sculpt a scalloped, wavy border, while the CSS round() function ensures perfect pattern alignment along the edges.
See the Pen Images Inside Wiggly Boxes.
Profile CSS Drawing
A stylish, detailed vector-style portrait with depth and shadows, fully implemented using pure CSS gradients and clipping paths.
See the Pen Profile CSS Drawing.
Shapes Alphabet with CSS
A pure CSS typography experiment rendering the full alphabet using layered gradients.
See the Pen Shapes Alphabet with CSS.
Neumorphic Loader
A tactile Neumorphic progress indicator where JavaScript drives the animation state by updating a custom property --progress. The visual logic relies on CSS conic-gradient utilizing calculated color stops to dynamically render the filling arc, while complex layered box-shadow creates a soft, extruded 3D aesthetic.
See the Pen Neumorphic Loader.
CSS-Only Pattern: Squares in Squares
A tartan plaid pattern generated entirely with CSS.
See the Pen CSS-Only Pattern: Squares in Squares.
Single Element Progress
Elegant, segmented radial charts that smoothly fill upon page load, showcasing the capabilities of modern CSS without JavaScript.
See the Pen Single Element Progress.
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.
See the Pen CSS Donut Chart for a File Manager UI.
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().
See the Pen CSS Blockquote with Gradient Drop Cap.
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.
See the Pen Fancy Corner Decoration for Images.
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.
See the Pen Change Bass Color with Hue.
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.
See the Pen CSS Knob Widget with Range Slider.
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.
See the Pen Animated Border Gradient Glow.
ctrl+c ctrl+v Keys RGB
A decorative keyboard with a realistic press effect and dynamic, iridescent RGB backlighting, reminiscent of gaming keyboards.
See the Pen ctrl+c ctrl+v Keys RGB.
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.
