As the number of lines increases by x%, CSS gradients gradually fade away during the generation process

Question

As the number of lines increases by x%, CSS gradients gradually fade away during the generation process

Is there a way to create a gradient that displays a red line every x% without the colors fading into white?

As I add more lines, the red stripes seem to lose their intensity and blend into a white background. The .four-stripes selector creates a good result, but once I introduce another red line like in the .more-stripes, everything becomes blurry. Check out an example on CodePen:

div {
  width: 1200px;
  height: 20px;
}

.four-stripes {
  background: linear-gradient(90deg,red 0.00% 0.27%,transparent 0.27% 1.92%,red 1.92% 2.19%,transparent 2.19% 3.84%,red 3.84% 4.11%,transparent 4.11% 5.75%,red 5.75% 6.03%,transparent 6.03% 100%);
}

.more-stripes {
 background: linear-gradient(90deg,red 0.00% 0.27%,transparent 0.27% 1.92%,red 1.92% 2.19%,transparent 2.19% 3.84%,red 3.84% 4.11%,transparent 4.11% 5.75%,red 5.75% 6.03%,transparent 6.03% 7.67%,red 7.67% 7.95%,transparent 7.95% 100%)
}

<div>
  <div class="four-stripes"></div>
  <div class="more-stripes"></div>
</div>

html css gradient linear-gradients

Answer 1

Answer №1

If you want to create a striped effect, consider using the "repeating-linear-gradient" property.

div {
  width: 1200px;
  height: 20px;
}

.more-stripes {
  background: repeating-linear-gradient(
    90deg,
    red,
    red 5px,
    transparent 5px,
    transparent 20px
  );
}

<div>
  <div class="more-stripes"></div>
</div>

Answer 2

If you want to create a striped effect, consider using the "repeating-linear-gradient" property.

div {
  width: 1200px;
  height: 20px;
}

.more-stripes {
  background: repeating-linear-gradient(
    90deg,
    red,
    red 5px,
    transparent 5px,
    transparent 20px
  );
}

<div>
  <div class="more-stripes"></div>
</div>

Answer 3

Answer №2

Make the gradient smoother by adjusting the background-size.

div {
  height: 20px;
  margin:5px;
}

.four-stripes {
  background: 
    linear-gradient(to right,red 5px,transparent 0 100%)
    left/25% 100%;
}

.more-stripes {
 background: 
    linear-gradient(to right,red 5px,transparent 0 100%)
    left/15% 100%;
}

<div>
  <div class="four-stripes"></div>
  <div class="more-stripes"></div>
</div>

Alternatively, you can maintain a fixed distance between stripes like this:

div {
  height: 20px;
  margin:5px;
}

.four-stripes {
  background: 
    repeating-linear-gradient(to right,red 0 5px,transparent 0 40px)
    left/calc(4*40px) 100% no-repeat;
}

.more-stripes {
 background: 
    repeating-linear-gradient(to right,red 0 5px,transparent 0 40px)
    left/calc(6*40px) 100% no-repeat;
}

<div>
  <div class="four-stripes"></div>
  <div class="more-stripes"></div>
</div>

Answer 4

Make the gradient smoother by adjusting the background-size.

div {
  height: 20px;
  margin:5px;
}

.four-stripes {
  background: 
    linear-gradient(to right,red 5px,transparent 0 100%)
    left/25% 100%;
}

.more-stripes {
 background: 
    linear-gradient(to right,red 5px,transparent 0 100%)
    left/15% 100%;
}

<div>
  <div class="four-stripes"></div>
  <div class="more-stripes"></div>
</div>

Alternatively, you can maintain a fixed distance between stripes like this:

div {
  height: 20px;
  margin:5px;
}

.four-stripes {
  background: 
    repeating-linear-gradient(to right,red 0 5px,transparent 0 40px)
    left/calc(4*40px) 100% no-repeat;
}

.more-stripes {
 background: 
    repeating-linear-gradient(to right,red 0 5px,transparent 0 40px)
    left/calc(6*40px) 100% no-repeat;
}

<div>
  <div class="four-stripes"></div>
  <div class="more-stripes"></div>
</div>

As the number of lines increases by x%, CSS gradients gradually fade away during the generation process

Answer №1

Answer №2

Similar questions

Animating a spinning SVG path around its center within a larger rectangular box

Using a HTML value as an argument in a React component

Guide to extracting additional data from a JSON array upon selection of a value within an option tag using jQuery

Designing webpages by superimposing text onto images with customizable positioning

Incorporate a Burger Icon into the Navigation Menu

Error encountered when attempting to reinitialize DataTable while iterating through multiple tables and searching within tabs

Populate HTML dropdown menu with data from an external JSON file

change the css back to its original state when a key is pressed

Is it possible to achieve this shaded gradient effect using CSS3?

displaying outcomes as 'Indefinite' rather than the anticipated result in the input field

Do we need to include href in the anchor tag?

Choosing the Offspring: Deliberating on Multiple Children with Identical Names in Selenium

Is there a way to deactivate a button upon clicking and then substitute it with a new button that serves a different purpose in AngularJS?

Issue with Selenium WebDriver: Expectation failure while waiting for element visibility at specified location(..)

Converting this HTML/PHP code into JavaScript: A step-by-step guide

Displaying divs inline with overlapping child divs

What causes CSS to fail to load in React but work normally in Next.js?

When the button is clicked, bind the value to an object using the specified key in

How can the selected value be shown in the dropdown menu after moving to a different webpage in HTML?

What is the best way to combine two DIV table rows within Bootstrap 5?