I want to create a rainbow effect that fades using CSS gradients.
Vertically, I want the rainbow effect:
background: linear-gradient(to bottom, red, orange, yellow, green, blue, violet);
Horizontally, I want the fading effect:
background: linear-gradient(to right, rgba(1,1,1,1), rgba(1,1,1,0));
My initial thought was to have two divs, the outer with the transparency, and the inner with the rainbow, but the transparency just got swallowed. Then it occurred to me that background on the outer element is not what will make this work. It'd need to be filter for that pattern to work.
So either I need to figure out how to make filter work with a gradient (possibly an SVG that I can stretch?), or I need to use a single <div> whose background somehow takes into account both linear gradients. I'd prefer the latter, since it's much simpler.
Are either of these possible?
Update
Looking at How to add multiple css gradient as a multiple background? makes it look like I should just be able to do:
background: linear-gradient(to right, rgba(1,1,1,1), rgba(1,1,1,0)), linear-gradient(to bottom, red, orange, yellow, green, blue, violet);
This is getting me close, but the horizontal gradient isn't causing the vertical gradient to gain transparency; rather, it's causing it to go from black to fully visible.
.rainbow {
height: 200px;
background: linear-gradient(to right, rgba(1,1,1,1), rgba(1,1,1,0)), linear-gradient(to bottom, red, orange, yellow, green, blue, violet);
}
<div class='rainbow'></div>
I've also noticed that in the first gradient, the first three values in rgba() don't matter--only the alpha does. I don't know what to make of this.
.rainbow {
height: 200px;
background: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(1, 1, 1, 0)), linear-gradient(to bottom, red, orange, yellow, green, blue, violet);
}
<div class='rainbow'></div>
Check this Out
Just less complications when you can use a gradient generator for css backgrounds. Handy and easy to use. Some things are better left off lazy.
rainbow {
background: red; /* not working, let's see some red */
background: -moz-linear-gradient( top ,
rgba(255, 0, 0, 1) 0%,
rgba(255, 255, 0, 1) 15%,
rgba(0, 255, 0, 1) 30%,
rgba(0, 255, 255, 1) 50%,
rgba(0, 0, 255, 1) 65%,
rgba(255, 0, 255, 1) 80%,
rgba(255, 0, 0, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, rgba(255, 0, 0, 1)),
color-stop(15%, rgba(255, 255, 0, 1)),
color-stop(30%, rgba(0, 255, 0, 1)),
color-stop(50%, rgba(0, 255, 255, 1)),
color-stop(65%, rgba(0, 0, 255, 1)),
color-stop(80%, rgba(255, 0, 255, 1)),
color-stop(100%, rgba(255, 0, 0, 1)));
}
Related
I'm trying to get a background color on part of some tds, so that it looks similar to a progress bar background:
From left to somewhere in the middle, it's colored, and after that percentage, it's white.
And if it's 100%, of course, the whole td is colored.
The color, a linear-gradient, is the same on all tds, but the length will differ. I only have 3 lengths:
30%
70%
100%
Also 0%, but it's just empty then, so this is out of the question
For this, I'm using a specific class for each variation, .progress_**.
Every class has two linear-gradients on the background property.
This is my current working CSS:
.progress_30 {
background:
linear-gradient(to right,
rgba(0, 0, 0, 0) 0%,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 1) 30%
),
linear-gradient(to right, yellow, green)
;
}
.progress_70 {
background:
linear-gradient(to right,
rgba(0, 0, 0, 0) 0%,
rgba(255, 255, 255, 0) 70%,
rgba(255, 255, 255, 1) 70%
),
linear-gradient(to right, yellow, green)
;
}
.progress_100 {
background:
linear-gradient(to right,
rgba(0, 0, 0, 0) 0%,
rgba(255, 255, 255, 0) 100%,
rgba(255, 255, 255, 1) 100%
),
linear-gradient(to right, yellow, green)
;
}
As you can see, there is a lot that repeats.
I want at least to put the color in a separate .progress class, so it can be changed easily without altering the lengths, and so I can add or alter some lengths without touching the colors in the future.
So I tried this:
.progress {
background: linear-gradient(to right, yellow, green);
}
.progress_30 {
background:
linear-gradient(to right,
rgba(0, 0, 0, 0) 0%,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 1) 30%
)
;
}
.progress_70 {
background:
linear-gradient(to right,
rgba(0, 0, 0, 0) 0%,
rgba(255, 255, 255, 0) 70%,
rgba(255, 255, 255, 1) 70%
)
;
}
.progress_100 {
background:
linear-gradient(to right,
rgba(0, 0, 0, 0) 0%,
rgba(255, 255, 255, 0) 100%,
rgba(255, 255, 255, 1) 100%
)
;
}
This doesn't fully work: the white part on the right is the correct length. But on the left, I don't see my linear-gradient, only the page's background color (which isn't white).
Is there a way I can get as few repetitions as possible in CSS, at least have the linear-gradient's color set only once, or do I have to do it like in my first example?
You can rely on background-size and keep the gradient declaration within the same class:
div {
min-height: 50px;
}
.progress {
background:
linear-gradient(#fff, #fff) right no-repeat,
linear-gradient(to right, yellow, green);
}
.progress_30 {
background-size: 70% 100%, auto;
}
.progress_70 {
background-size: 30% 100%, auto;
}
.progress_100 {
background-size: 0% 100%, auto;
}
<div class="progress progress_30"></div>
<div class="progress progress_70"></div>
<div class="progress progress_100"></div>
You can simplify more using CSS variable in case you want to consider more percentage values:
div {
min-height: 50px;
}
.progress {
background:
linear-gradient(#fff, #fff) right/calc(100% - var(--p,50%)) 100% no-repeat,
linear-gradient(to right, yellow, green);
}
<div class="progress" style="--p:30%"></div>
<div class="progress" style="--p:68%"></div>
<div class="progress" style="--p:80%"></div>
<div class="progress" ></div>
I want to create a background with two gradients - layered atop one another.
I created the below example, and it seems like I can't put multiple gradients together. (The example was created based on MDN-Using multiple backgrounds & MDN-gradient)
.radial-gradient {
background: radial-gradient(red, yellow, rgb(30, 144, 255));
}
.linear-repeat {
background: repeating-linear-gradient(45deg,
blue, blue 5px, white 5px, white 10px);
}
.combined-gradient {
background: radial-gradient(red, yellow, rgb(30, 144, 255)),
repeating-linear-gradient(45deg, blue, blue 5px, white 5px, white 10px);
}
<div class="radial-gradient">radial gradient</div><br/>
<div class="radial-gradient linear-repeat">linear gradient</div><br/>
<div class="radial-gradient linear-repeat">combined gradient 1</div><br/>
<div class="combined-gradient">combined gradient 2</div>
Maybe the following constraint prevents layering gradients:
Only the last background can include a background color.
If it's not allowed to layer two gradients as a background, how should I layer them in another way?
I think what you're looking for is this.
What's the problem with your code?
Well, each of your gradient is non-transparent, so one will overlap the other completely and that's why only one is visible. The workaround is, you make use of rgba(x,y,z,alpha) to give them alpha transparency which gives the background a fade effect to see through each other.
.combined-gradient1 {
background: repeating-linear-gradient(45deg, rgba(00, 00, 255, 0.8), rgba(00, 00, 255, 0.8) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 10px), radial-gradient(rgba(255, 0, 0, 0.8), rgba(255, 255, 0, 0.8), rgba(30, 144, 255, 0.8));
}
.combined-gradient2 {
background: radial-gradient(rgba(255, 0, 0, 0.8), rgba(255, 255, 0, 0.8), rgba(30, 144, 255, 0.8)), repeating-linear-gradient(45deg, rgba(00, 00, 255, 1), rgba(00, 00, 255, 1) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 10px);
}
<div class="combined-gradient1">combined gradient 1</div>
<br>
<div class="combined-gradient2">combined gradient 2</div>
I have a coloured rectangle div on which I put linear gradient at 45 degrees to achieve zebra-like effect. I'd like to layer the second gradient, on 135 degrees (orthogonal to the previous one).
height: 30px;
background-color: rgb(255, 0, 0);
background-image:
repeating-linear-gradient(45deg, rgb(255, 0, 0), rgb(255, 0, 0) 10px, rgb(0, 255, 0) 10px, rgb(0, 255, 0) 20px),
repeating-linear-gradient(135deg, rgb(255, 0, 0), rgb(255, 0, 0) 10px, rgb(0, 0, 255) 10px, rgb(0, 0, 255) 20px);
The main color is red, the first stripes are green and the last ones are intended to be blue. However I cannot see the last ones stripes in blue.
Achieved effect:
Expected effect:
How do I add multiple gradients overlapping themselves?
I don't believe you can layer two gradients on top of each other like that if they are all solid colors.
However, you can use some transparency and a bit of creative thinking to get your desired effect.
Your background-color, is already red, so replace all the references to red in your first gradient with transparent. Now you've got a pattern of stripes that are green and transparent. The transparent stripes appear red since that's the background color.
Then do a similar color-transparent stripe pattern for your second gradient: blue and transparent.
That ends up giving us our pattern backwards from how you want it, so the final step is to swap the two gradients, so the blue stripes are on top of the green ones.
div {
height: 30px;
background-color: rgb(255, 0, 0);
background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgb(0, 0, 255) 10px, rgb(0, 0, 255) 14px), repeating-linear-gradient(45deg, transparent, transparent 10px, rgb(0, 255, 0) 10px, rgb(0, 255, 0) 20px);
}
<div class="one"></div>
#vals points out that you could also use transparency with your blue stripes on top of a red-green stripe pattern. So in your original code, in the red-blue stripe pattern, you'd replace the red references with transparent. Then, as with the first option, you'd flip the order of the gradients, so the blue-transparent pattern is first.
With that approach, the overall pattern wouldn't rely on the background-color, so it'd be more of a fallback.
div {
height: 30px;
background-color: rgb(255, 0, 0);
background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgb(0, 0, 255) 10px, rgb(0, 0, 255) 14px), repeating-linear-gradient(45deg, rgb(255, 0, 0), rgb(255, 0, 0) 10px, rgb(0, 255, 0) 10px, rgb(0, 255, 0) 20px);
}
<div></div>
I have this line of code
background:linear-gradient(341deg, #8a8a8a 0%, #8a8a8a 31.9%, #000 32.1%, #000 100%);
As you can see its half grey half black. Is there a way to make the grey part of it transparant, so then it would be half transparant half black..
Thanks in advance,
Kevin
You can use rgba() to achieve this where the first 3 parameters are the color you want (in your case, 138, 138, 138) and the last parameter is the opacity (in your case this will be 0)
To give you an example, your code will turn into this:
background:linear-gradient(341deg, rgba(138,138,138,0) 0%, rgba(138,138,138,0) 31.9%, #000 32.1%, #000 100%);
In this fiddle you can see it in action
Hope this helps!
Try this
background: linear-gradient(341deg, rgba(0, 0, 0, .33) 0%, rgba(0, 0, 0, .5) 31.9%, rgba(0, 0, 0, 1) 31.9%, rgba(0, 0, 0, 1) 100%);
Check the result
.original {
background:linear-gradient(341deg, #8a8a8a 0%, #8a8a8a 31.9%, #000 32.1%, #000 100%);
}
.advice {
background: linear-gradient(341deg, rgba(0, 0, 0, .33) 0%, rgba(0, 0, 0, .5) 31.9%, rgba(0, 0, 0, 1) 31.9%, rgba(0, 0, 0, 1) 100%);
}
.original,
.advice,
.tree{
height: 400px;
width: 400px;
}
.tree {
background-image: url('http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg');
}
<div class="tree"></div>
<div class="tree"><div class="original"></div></div>
<div class="tree"><div class="advice"></div></div>
I'm having issues getting an angled stripe background to show nicely in Chrome.
background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1) 1px, transparent 0px, transparent 4px);
http://jsfiddle.net/hornetnz/JxvNd/
It seems to show in Firefox and IE10 fine. But Chrome develops a pattern gap every few lines.
Try this:
background-image: -webkit-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
background-image: -moz-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
background-image: -ms-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
background-image: -o-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
-webkit-background-size: 4px 4px;
-moz-background-size: 4px 4px;
-o-background-size: 4px 4px;
background-size: 4px 4px;
/* Background size must be an even number! */
Here's your updated example: http://jsfiddle.net/JxvNd/1/
This seem to be chrome rendering bug as answered here: Chrome linear gradient bug
You could try some of these alternatives:
Use blur edge transition like described in above link
Use svg (looks like this is the pattern you want: http://www.svgeneration.com/generate/Diagonal-Stripes)
Try using regular linear-gradient and combining it with background size (not sure if it's possible to get repeating background that way. I will try and make pen later)