Questions tagged [repeating-linear-gradient]
28 questions
8
votes
6 answers
How create solid rainbow border with CSS?
How to create the following rainbow effect using CSS?
i.e. top rounded border with solid rainbow color stops (without inserting html).
Colors are: #c4e17f. #f7fdca, #fad071, #f0766b, #db9dbe, #c49cdf, #6599e2, #61c2e4.
What I have tried so…
abdul-wahab
- 2,182
- 3
- 21
- 35
6
votes
1 answer
How to create an infinite background pattern animation using linear-gradient?
I am trying to create an animated repeating-pattern (diagonal stripes sliding horizontally), as placeholder for a loading block (li in this case).
How can I make the animation smooth/continuous giving the illusion the pattern is infinitely…
Kamafeather
- 8,663
- 14
- 69
- 99
5
votes
2 answers
CSS Square background - image
I tried to make some square background using CSS only, but i got just line background without the option of horizontal lines.
This is my example code:
.container{
background-color:red;
width: 400px; height:200px; margin:0 auto;
…
24sharon
- 1,859
- 7
- 40
- 65
3
votes
2 answers
Animating background in progress bar (HTML5) Shadow DOM
I'm trying to animate the progress bar (HTML5 tag). I managed to style the Shadow DOM elements, but I can't animate the background (repeating linear gradient). It works in Firefox, but not in Chrome and Edge.
By it does not work I…
yunzen
- 32,854
- 11
- 73
- 106
2
votes
1 answer
CSS "background-image: linear-gradient" makes unwanted repeating color stripes with 180 degrees
When i use:
body {background-image: linear-gradient(45deg, white 0%, grey 100%);}
The result is as expected:
But when i change the angle to 180' or 0' it makes stripes:
Well if this was what i wanted, i'd just use repeating-linear-gradient()
I…
Whitenerius
- 65
- 7
2
votes
1 answer
CSS's repeating-linear-gradient with multiple angles
I'm trying to create a repeating linear gradient with consecutive but inversed angles (alternating colors and angles). Is this posible? and how could I accomplish it? .
Thanks!
Guido Glielmi
- 73
- 1
- 5
2
votes
2 answers
Creating seamless animation with CSS linear gradient
div {
border-radius: 2rem;
width: 10rem;
height: 10rem;
background-color: #0dd;
background-image:
linear-gradient(
-45deg,
rgba( 0,0,0,0.125 ), transparent, rgba( 0,0,0,0.125 ), transparent
);
}
div {
…
Lynel Hudson
- 2,335
- 1
- 18
- 34
2
votes
4 answers
Match gradients of two divs, if those have different width
I have 10 inline divs, which have same gradient type - 45deg lines, but gradients have different colors and divs have different width.
Is it possible to match gradient? (hope pics below explain it)
My CSS for gradient. Only color changes.
#div1…
Devy
- 73
- 7
2
votes
2 answers
FontAwesome Striped Star
I am trying to create a striped star using font-awesome fa-star-o icon like shown below. I used background-gradient to create this effect, but instead of just covering the star icon its covering the entire square space around the icon. May be what I…
Nandita Sharma
- 13,287
- 2
- 22
- 35
2
votes
2 answers
manipulating repeat linear gradient
i want to recreate a line pattern similar to uber's brand website: https://brand.uber.com/ - in particular the repeating lines you can see in the background: http://prntscr.com/etius6
to do so, i thought of using a repeating-linear-gradient with…
valerio0999
- 11,458
- 7
- 28
- 56
1
vote
1 answer
Infinite scrolling gradient background
I've searched and not found this question answered on SO, so I'm asking it here directly.
Does anyone have a clean method to create an infinitely scrolling gradient background? (the gradient shifts, so you can follow the colors from one side/corner…
MisterNad
- 432
- 3
- 14
1
vote
0 answers
CSS repeating-linear-gradient not showing lines less than 4px
Facing this weird issue in firefox/safari.
Linear Gradients stripes less than 4px are not visible. Please see screenshot and code:
Here is the code:
background-image: -moz-repeating-linear-gradient(
transparent 0, transparent…
Irakli_S
- 51
- 4
1
vote
2 answers
How to stop a repeating-linear-gradient in CSS?
In order to add a repeating-linear-gradient in CSS one can do this with something like the following code. It will create a nice div-element with horizontal bars.
.gradient {
background: repeating-linear-gradient(90deg, green, green 10px,…
Robin Bastiaan
- 572
- 2
- 8
- 21
1
vote
1 answer
Repeating Linear Gradient doesn't appear when Saved as PDF in Google Chrome
I am currently working on my resume and trying to have some neat looking circles on it made up of lines.
So I used a repeating-linear gradient, and it works, like it shows up on the browser and on the print screen when you hit CTRL + P, but when you…
Andrew V
- 11
- 3
1
vote
2 answers
repeating-linear-gradient broken on the last repetition
I'm trying to create element with stripped background using repeating-linear-gradient but start it 30px above the container. I'm using the background-position property, but the last repetition of the gradient is always broken:
Sample code:
.wrapper…
Bodzio
- 2,440
- 2
- 19
- 37