How to remove blurriness from linear-gradient lines?

Question

Given a div, I want to "lock" / disable with a visual style. Previously there was a pattern similar to this

#box {
  width: 200px;
  height: 100px;
  border: 1px solid;
  background: repeating-linear-gradient(45deg, #1c71b8, #1c71b8 10px, #5fb5fc 10px, #5fb5fc 20px);
}

<div id="box">some content goes here, width and height are dynamic<br><br>it might take some space</div>

Now I want to strike through the div ( similiar to draw diagonal lines in div background with CSS ). I can only set the style of the element so it's not possible to add additional helper divs. I tried this

#box {
  width: 200px;
  height: 100px;
  border: 1px solid;
  background: 
         linear-gradient(to top left,
             rgba(28, 113, 184, 0) 0%,
             rgba(28, 113, 184, 0) calc(50% - 5px),
             rgba(28, 113, 184, 1) 50%,
             rgba(28, 113, 184, 0) calc(50% + 5px),
             rgba(28, 113, 184, 0) 100%),
         linear-gradient(to top right,
             rgba(28, 113, 184, 0) 0%,
             rgba(28, 113, 184, 0) calc(50% - 5px),
             rgba(28, 113, 184, 1) 50%,
             rgba(28, 113, 184, 0) calc(50% + 5px),
             rgba(28, 113, 184, 0) 100%);
}

<div id="box">some content goes here, width and height are dynamic<br><br>it might take some space</div>

which is what I want but how can I remove the blurriness from the lines? There might be a time when I need to adjust the line thickness, e.g. changing it to 10px.

score 2 · Accepted Answer · answered May 31 '23 at 14:49

You don't need all those color stops, you can simplify like below:

#box {
  width: 200px;
  height: 100px;
  border: 1px solid;
  background: 
         linear-gradient(to top left,
             rgba(28, 113, 184, 0)   calc(50% - 5px),
             rgba(28, 113, 184, 1) 0 calc(50% + 5px),
             rgba(28, 113, 184, 0) 0),
         linear-gradient(to top right,
             rgba(28, 113, 184, 0)   calc(50% - 5px),
             rgba(28, 113, 184, 1) 0 calc(50% + 5px),
             rgba(28, 113, 184, 0) 0);
}

<div id="box">some content goes here, width and height are dynamic<br><br>it might take some space</div>

Even better with CSS variables:

#box {
  --c: rgb(28 113 184); /* the color */
  --s: 5px; /* the size */
  
  width: 200px;
  height: 100px;
  border: 1px solid;
  --g: #0000 calc(50% - var(--s)),var(--c) 0 calc(50% + var(--s)),#0000 0;
  background: 
   linear-gradient(to top left ,var(--g)),
   linear-gradient(to top right,var(--g));
}

<div id="box">some content goes here, width and height are dynamic<br><br>it might take some space</div>

I really like your approach, +1. I'm using Vue and tried to use your approach via inline styling https://play.vuejs.org/#eNp1kd1qwzAMhV9FeIwkrFmbbYVSssLewzeOrSUmjm1stWspffc5/SMUavCFfHQ+CZ8j+/H+fbdFtmY14eCNINxwC1ArvQOtvjlr3J4zWEc6GEzlkVtOnLKyNE72pXTGhWwNWWib/GMFVfUJ1eqryGYjBeDWR52WvcUYx96l3z/qbRBKo6VRflmkA1IYmS8Xr1DCToT8kVMUs8nzeY0CJq63Z64LfXFboBGyb4PbWpUmG21RhPsyOTkg58HgL8F03K0h4eCJJ+i2o6unLe7/4bY0GtKsyu8hOqMVBFQX+cTZJroBQTpLiQWtwwgdBpzBn1bUgbAq1SMaREBQBysGLesmbMarCYazRqLHBE+k6IXEep7STLHW83vG7PQPU86jcg== do you know if something is wrong with it? — baitendbidz, May 31 '23 at 15:24
@baitendbidz I am using `--g` twice in the background definition and you only updated once — Temani Afif, May 31 '23 at 15:38

score 1 · Answer 2 · answered May 31 '23 at 12:09

You're fading the line from an alpha of 0 to an alpha of 1 over the course of 1 colour-stop in your gradient. In between these 2 values, the alpha will (does) vary. Since they're at 50%-5px, 50% and 50%+5px, you have lots of pixels for the alpha value to vary over. You're calling this effect blurriness.

From one edge of the line to the other edge of the line, you want the colour to be a single value.

So instead of having a single stop with an alpha of 1, have two of them. Each one of them will represent one edge of the line. Then, instead of transitioning back over a number of pixels, transition back immediately, with another colour stop at the same position.

Here's what it looks like in code:

#box {
  width: 200px;
  height: 100px;
  border: 1px solid;
  background: 
         linear-gradient(to top left,
             rgba(28, 113, 184, 0) 0%,
             rgba(28, 113, 184, 0) calc(50% - 5px),
             rgba(28, 113, 184, 1) 50%,
             rgba(28, 113, 184, 0) calc(50% + 5px),
             rgba(28, 113, 184, 0) 100%),
         linear-gradient(to top right,
             rgba(28, 113, 184, 0) 0%,
             rgba(28, 113, 184, 0) calc(50% - 2.5px),
             rgba(28, 113, 184, 1) calc(50% - 2.5px),
             rgba(28, 113, 184, 1) calc(50% + 2.5px),
             rgba(28, 113, 184, 0) calc(50% + 2.5px),
             rgba(28, 113, 184, 0) 100%);
}

<div id="box">some content goes here, width and height are dynamic<br><br>it might take some space</div>

How to remove blurriness from linear-gradient lines?

2 Answers2