# Custom CSS Border Effects

**URL:** <https://forum.inductiveautomation.com/t/custom-css-border-effects/79316>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 18, 2023, 9:24pm UTC](https://forum.inductiveautomation.com/t/custom-css-border-effects/79316 "2023-09-18T21:24:53Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Derek\_Reees](https://avatars.discourse-cdn.com/v4/letter/d/ccd318/32.png) [@Derek\_Reees](https://forum.inductiveautomation.com/u/Derek_Reees)\
**Post date:** [September 18, 2023, 9:24pm UTC](https://forum.inductiveautomation.com/t/custom-css-border-effects/79316/1 "2023-09-18T21:24:53Z")

</div>

I am trying to replicate an animated gradient border similar to the one in [this](https://www.youtube.com/watch?v=-VOUK-xFAyk) YouTube video, but I ran into issues getting it to render properly. Hopefully someone here can point me in the right direction.

It generates the ::before/after sudo elements in the HTML but the only way I can get it to render is if I change the z-index on the sudo elements (IT has blocked my ability to upload pictures, but ill post the HTML below), but then it overlays the label. I tried playing with the z-index on both the sudo elements and the class, but I didn't have any luck.  
I have a style class of 'ItemSelected' under the label component (have also tried a container).  
I have this working in VSCode, and the HTML is generated in a similar manner.

Here is my advanced stylesheet:

```auto
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  --clr-1: #052b2f;
  --clr-2: #073438;
  --clr-3: #0e4b50;
  --clr-4: #2d8f85;
  --clr-5: #637c54;
}

.psc-ItemSelected {

  position: relative;
}

.psc-ItemSelected::before,
.psc-ItemSelected::after {
  content: '';
  position: absolute;
  inset: -.2rem;
  z-index: -1;
  background: conic-gradient(
    from var(--gradient-angle),
    var(--clr-3),
    var(--clr-4),
    var(--clr-5),
    var(--clr-4),
    var(--clr-3)
  );
  border-radius: inherit;
  animation: rotation 1s linear infinite;
}

.psc-ItemSelected::after {
  filter: blur(.5rem);
}

@keyframes rotation {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}

```

Generated HTML:  
\*the ::before/after are inside the div. Devtools doesnt copy it out.

```auto
<div data-component="ia.display.label" data-component-path="C.0:0" class="psc-ItemSelected ia_labelComponent" style="background-color: rgb(255, 255, 255); text-align: center; display: flex; flex-direction: column; justify-content: flex-end; flex: 0 0 80px;"><span>Animate Me</span></div>

```