CODEWITHSUNDEEP
cssgradientlinear-gradients
S.A.Parkhid
S.A.Parkhid

Reputation: 2870

Gradient Stripe Background Color Understanding

I need to understand this alignment! I have done a lot of search for this problem, but still unclear.

Please take a look at this pattern :

gradient stripe pattern

For generating this with CSS we should write something like this:

 background:repeating-linear-gradient(45deg,lime ,green 25px ,lime 25px,green 50px );

which will create a 50x50 square like pattern above, but I cannot understand the logic behind this! Somewhere I read that two colors in same stop point will make the color sharper, but the interpolation and merging are not mentioned! I will be so glad if someone can help me to understand template used in CSS function.

Upvotes: 2

Views: 1660

Answers (1)

Harry
Harry

Reputation: 89760

background:repeating-linear-gradient(45deg,lime ,green 25px ,lime 25px,green 50px );

This background setting can be interpreted as follows:

  • The gradient image is placed at an angle of 45 degree to the container.
  • The gradient starts with the color lime and will gradually change to green color at the 25px mark.
  • At 25px the color shifts abruptly from green to lime and continues to shift to green till 50px.
  • The gradient is a repeating linear gradient and so will repeat until the entire container is filled up with the pattern. Repetition is handled like tiles and you can think of it as placing equal sized tiles around each other so as to fill up the entire area.

Without using repeating-linear-gradient you would get only a 50px x 50px background image.

div {
  height: 200px;
  width: 200px;
  border: 1px solid;
}
.repeating-gradient {
  background: repeating-linear-gradient(45deg, lime, green 25px, lime 25px, green 50px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="repeating-gradient"></div>

If you want to achieve an effect like in the image then you need to change your gradient to the below:

  background: repeating-linear-gradient(45deg, lime, lime 25px, green 25px, green 50px);

This background setting can be interpreted as follows:

  • The gradient image is placed at an angle of 45 degree to the container.
  • The gradient starts with the color lime and will continue to hold the color till the 25px mark.
  • At 25px the color shifts abruptly from lime to green and continues to be green till 50px.
  • This pattern will again repeat till the entire size of the element is covered and would therefore produce a striped pattern.

div {
  height: 200px;
  width: 200px;
  border: 1px solid;
}
.repeating-gradient {
  background: repeating-linear-gradient(45deg, lime, lime 25px, green 25px, green 50px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="repeating-gradient"></div>

Upvotes: 3

Related Questions