0

I have a div with a background defined as linear-gradient, and an almost transparent border on top of it. It should paint correctly, but the rendering is broken.

Broken linear-gradient background with transparent border

Here is the associated CodePen.

body {
  background: black;
}

.gradient-background {
  background: linear-gradient(270deg, #681c2e 0%, #232a6c 49.48%);
  height: 80px;
  border: solid 20px rgba(248, 251, 255, 0.1);
}
<div class="gradient-background"></div>

Do you know how to fix this with CSS? It behaves consistently on Chrome and Firefox. Is it an expected behavior in the spec of CSS and HTML?

Adam
  • 5,495
  • 2
  • 7
  • 24
ghivert
  • 436
  • 4
  • 15

1 Answers1

2

rgba(248, 251, 255, 0.1); is what causes the issue.

Use background-origin: border-box; and it will work fine.

body {
  background: black;
}

.gradient-background {
  background: linear-gradient(270deg, #681c2e 0%, #232a6c 49.48%);
  height: 80px;
  border: solid 20px rgba(248, 251, 255, 0.1);
  background-origin: border-box;
}
<html>
  <body>
    <div class="gradient-background"></div>
  </body>
</html>

For more information about this, check this source.

Bagetsu
  • 36
  • 5