# Conical Gradient Paint

**URL:** <https://forum.inductiveautomation.com/t/conical-gradient-paint/85107>\
**Category:** Module Development\
**Tags:** vision\
**Created:** [February 1, 2024, 4:37pm UTC](https://forum.inductiveautomation.com/t/conical-gradient-paint/85107 "2024-02-01T16:37:55Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [February 1, 2024, 6:02pm UTC](https://forum.inductiveautomation.com/t/conical-gradient-paint/85107/3 "2024-02-01T18:02:39Z")

</div>

Use CSS conic-gradient.  
Here it's applied to a label with border radius set to 50% all around.

 ![Conic gradient](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/3/93b4c3990d3466683dcaab74df6cf52b24eb72f7.png)

Copy and paste the following into a coordinate view.

> **Conic gradient label component.**
>
> ```auto
> [
> {
> "type": "ia.display.label",
> "version": 0,
> "props": {
> "style": {
> "borderStyle": "solid",
> "borderWidth": 1,
> "borderColor": "#493F3F",
> "borderTopLeftRadius": "50%",
> "borderTopRightRadius": "50%",
> "borderBottomLeftRadius": "50%",
> "borderBottomRightRadius": "50%",
> "height": 180,
> "background": "conic-gradient(from 230deg at 50% 50%, black, gray, white, black)"
> }
> },
> "meta": {
> "name": "ConicGradient"
> },
> "position": {
> "x": 616,
> "y": 87,
> "height": 180,
> "width": 180
> },
> "custom": {}
> }
> ]
> 
> ```

---

_[View the full topic](https://forum.inductiveautomation.com/t/conical-gradient-paint/85107)._