How to add gradient color to panel?

How might I be able to add a linear-gradient to the panel?

Where the horizontal lines don’t get removed from the code.

https://jsfiddle.net/ytuLoax1/

:root {
  --wide: 8.8%;
  --angle1: 0;
  --angle2: -90;
}

.panel {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background:
    repeating-linear-gradient(calc(var(--angle1) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px)), repeating-linear-gradient(calc(calc(var(--angle2) + 90) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px));
  background-color: #222;
  border-bottom: 2px solid #191919;
  background-repeat: no-repeat;
  z-index: 0;
  overflow: hidden;
}

Just add it to the end of the background rule.

  background:
    repeating-linear-gradient(calc(var(--angle1) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px)), repeating-linear-gradient(calc(calc(var(--angle2) + 90) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px)),
    linear-gradient(to bottom, red, blue);
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.