Question 179339 in Html Question posted in
Some basic documentation can be found here.

Html – How to remove blurriness from linear-gradient lines?

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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search