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

Determine the height of a Bootstrap 4 row based on a specific column, rather than the tallest

Exploring the images in a continuous loop

What is the reason behind certain websites not displaying a .php extension at the end of their file names?

I'm throwing in the towel on CSS, I just can't seem to get a simple button to sit at the bottom of

Timer for searching webpages using Javascript

Showing a cell border when a radio button is chosen

Guide to utilizing variables with Pattern.compile in Java for selenium RC

Ensuring consistent width for two divs using CSS

Element with negative z-index overlapping background of parent element

Switch on the warning signal using bootstrap

Subject line matches webpage header

After incorporating an additional element, the li:nth-child(odd) selector is no longer functioning correctly

Turn off HTML5 Audio

What is the syntax for implementing conditional statements within the style jsx of Next.js?

Identifying child elements in jQuery with identical IDs

How can a JSON string be assigned to a variable for use in a Google pie chart?

Updating text color with Ajax response value

What size should I use for creating a responsive website?

How to toggle a specific element in Bootstrap 4 with a single click, without affecting other elements

Show various attachment file names using jQuery