I'm trying to create a linear gradient within another linear gradient, is it possible ? example below
background: linear-gradient(to right, #color1 50%, #color2 0%)
color 1 is
background: linear-gradient(#aa0507,#e0171e,#aa0507);
color 2 is
background: linear-gradient(#f4c05b,#fcd580,#f4c05b);
the end result should be this
Simply adjust the background-position/background-size using multiple background. Basically each gradient will be half width and full height.
body {
margin:0;
height:100vh;
background:
linear-gradient(#aa0507,#e0171e,#aa0507) right/50% 100%,
linear-gradient(#f4c05b,#fcd580,#f4c05b) left /52% 100%; /*we can make this a little bigger to avoid the blank space*/
background-repeat:no-repeat;
}
You can combine the two gradients into background: linear-gradient(to right, #f4c05b, #fcd580, #f4c05b 50%, #aa0507 50%, #e0171e, #aa0507) to get the effect - note that the gradients on the both left / right sections are left to right in this answer.
See demo below:
body {
background: linear-gradient(to right, #f4c05b, #fcd580, #f4c05b 50%, #aa0507 50%, #e0171e, #aa0507);
}
Related
For a client I am trying to implement a background on an HTML element, which contains 2 radial gradients. One is located in the top right, one is located in the bottom left. My CSS only renders one of the radial gradients.
I have tried putting two radial gradient elements as a background:
body {
width: 100vw;
height: 100vh;
background-color: green;
background:
radial-gradient(
circle at top right,
red,
black 20%
),
radial-gradient(
circle at bottom left,
yellow,
orange 20%
);
}
Only the first radial-gradient appears, but the second one doesn't. When I switch the position of both gradients in de CSS markup, the colors change. So it appears as if only the first gradient is recognised.
I'm not sure which amount of color you want to see in the result, but my guess is you are after something like this.
body {
width: 100vw;
height: 100vh;
margin:0;
background-color: green;
background-image:
radial-gradient(
circle at top right,
red,
black 20%,
transparent 40%
),
radial-gradient(
circle at bottom left,
yellow,
orange 20%,
transparent 40%
);
}
One problem with your code was that you used the background shorthand for the background images, which resets the background color, so the green was no longer there. Use background-image instead.
Another was that both gradients covered the whole page, while you apparently want them to take up only the top right corner and bottom left corner instead. I solved this by giving them both transparent from 40%.
And I took the liberty of giving the body 0 margin, to get rid of the scrollbars.
My CSS only renders one of the radial gradients.
Simply because you are using opaque colors and by default a gradient will cover all the element so your will only see the top layer.
In addition to the answer of Mr Lister, you can adjust background-size to control the space each gradient should take:
body {
margin:0;
height: 100vh;
background:
radial-gradient(circle at top right, red, black 40%) right,
radial-gradient(circle at bottom left, yellow, orange 40%) left;
background-size:50% 100%;
background-repeat:no-repeat;
}
This looks a bit ugly but if you want to have a continuous background make sure both end color are the same:
body {
margin:0;
height: 100vh;
background:
radial-gradient(circle at top right , red, black 40%, green 60%) right,
radial-gradient(circle at bottom left, yellow, orange 40%, green 60%) left;
background-size:50.5% 100%;
background-repeat:no-repeat;
}
I have only basic knowledge on the CSS. I'm trying to give gradient color for one of my ITEM as per below guidelines and the gradient should be vertical.
I tried the below , but only the first color is coming all over the region. I dont understand that 30% and 50%. How to achieve this?
.myheader {
background: linear-gradient(to bottom, #mycolor1 85%, #mycolor2 45%, #mycolor3 10%);
}
Eveyrone is giving the to bottom solution but the trivial solution is to consider to top and keep the percentage values you are using in the picture:
linear-gradient(to top, #mycolor3 10%, #mycolor2 45%, #mycolor1 85%);
example:
body {
background: linear-gradient(to top, red 10%, purple 45%, blue 85%);
margin: 0;
height: 100vh;
}
Concerning the percentage between (50% and 30%), they are probably the color hints (also called color interpolation hints). From the new specification
Between two color stops there can be a color interpolation hint, which specifies how the colors of the two color stops on either side should be interpolated in the space between them (by default, they interpolate linearly). There can only be at most one color interpolation hint between any two given color stops; using more than that makes the function invalid.
example:
body {
background:
/* First gradient with hints*/
linear-gradient(to top, red 10%, purple 45%, blue 85%) left /45% 100%,
/* Second gradient with hints*/
linear-gradient(to top, red 10%,27.5% ,purple 45%, 57% ,blue 85%) right/45% 100%;
background-repeat:no-repeat;
margin: 0;
height: 100vh;
}
You need to specify the points in ascending order. Just invert the values you have (you don't really need the purple but could add it if desired):
body {
height: 100vh;
overflow: hidden;
background: linear-gradient(to bottom, blue 15%, red 90%) center/cover no-repeat;
}
.myheader {
width: 100px;
height: 100px;
background: linear-gradient(to bottom, blue 15%, purple 45%, red 90%);
}
<div class="myheader"></div>
The to bottom direction tells you that your gradient is going from top to bottom. So if the first color is 85%, that means that it goes down to 85% of the height of the container.
By inverting the percentage (85% -> 15%), you can achieve the result you want.
This is an example , use your rgba colors.
.myheader {
background: linear-gradient(to bottom, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%
}
The percent values must ascend in order. ( https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient )
$mycolor1: blue;
$mycolor2: purple;
$mycolor3: red;
.myheader {
background: linear-gradient(to bottom, $mycolor1 0%, $mycolor2 50%, $mycolor3 90%);
height: 200px;
width: 100px;
}
https://jsfiddle.net/qa1kLmfc/3/
For your gradient you probably could use just blue and red.
I want a design like this on my <div>
But not getting this structure.
My CSS code is :
background: linear-gradient(to right, #406884 22%,#3b5261 50%, #38464f 80%);
Any kind of help would be appreciated.
Create 2 gradients, one with a step for the diagonal part and another with a transparent part for the horizontal part
.test {
width: 100%;
height: 100px;
background-image: linear-gradient(to top, black 40%, transparent 40%),
linear-gradient(-35deg, black 50%, tomato 50%, tomato 60%, lightgreen 60%, lightgreen 100%);
}
<div class="test"></div>
you can generate any type of gradient from below link
http://www.colorzilla.com/gradient-editor/
This maybe a simple question, but I didn't find a clear explanation for this.
I know in css3, the syntax for setting up a radial gradient is as following:
radial-gradient(shape size at position, start-color, ..., last-color);
If I set sth like this:
radial-gradient(circle at 50% 50%, #f00 50%, transparent 50%);
I thought the red circle will be positioned in the center, and the radius of the red circle would be 50%*containerWidth(or containerHeight). i.e. the circle will just touch the edge of the outer container, but what I got is not, please see the demo:
DEMO ON JSFIDDLE
So can anybody help to explain what's the exact meaning of the 50% here please(#f00 50%)? Many thanks.
based on #'s answer:
the 50% is refered to the diagonal from the center to the square
corner
I also put several demo here:
MORE DEMO ON JSFIDDLE
Because under the default option, the percentage is between the gradient stop radius and the diagonal, so when the ratio is 2**0.5/2≈0.707, the circle will touch the edges of the square.
The 50% in the color stop depends on the size of the image that is being generated.
And the size of the image depends on your choice between the 4 posible values for this property.
If you do not set it, the farthest-corner option is choosen (so, in your example, the 50% is refered to the diagonal from the center to the square corner
div{
width:100px;
height:160px;
border:solid 1px blue;
display: inline-block;
}
.gradient1{
background-image: radial-gradient(circle closest-side at 50% 40%, #f00 50%, transparent 50%);
}
.gradient2{
background-image: radial-gradient(circle closest-corner at 50% 40%, #f00 50%, transparent 50%);
}
.gradient3{
background-image: radial-gradient(circle farthest-side at 50% 40%, #f00 50%, transparent 50%);
}
.gradient4{
background-image: radial-gradient(circle farthest-corner at 50% 40%, #f00 50%, transparent 50%);
}
<div class="gradient1"></div>
<div class="gradient2"></div>
<div class="gradient3"></div>
<div class="gradient4"></div>
center 50% 50% places the gradient center at the center of the container, #f00 50% colors the gradient with red color up to 50% of radius the rest 50% being transparent, exactly what you see in jsfiddle. In other words the percent refers to the size (i.e radius) of the gradient object (which in the case of a radial gradient it is the radius, as it unfolds from the center outwards).
https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient
I have 2 div's and the upper div is transparent with a border radius on every corner, there is a div which is using solid background gradient underneath this and has been pushed up under the transparent div using a negative margin and z-index to put it behind the upper div.
Is there a way with CSS to hide the part of the div which is up underneath the div above it?
I did it this way because I need to maintain the corners which are highlighted in the second image.
Problem using color stops illustrated here:
jsfiddle.net/PKy8B/3/
As someone asked this would be the desired result:
Thanks everyone for the help but it looks like this is not possible to do this with a transparent div above and one behind, I have changed the top div to no longer be transparent just as a "best fix" option.
Unfortunately, the div is transparent and there's not much you can do about it. What you could do is not start the background-gradient until after the div has cleared the 'overhang' using a color-stop.
JSFiddle Demo
HTML
<div class="top"></div>
<div class="bottom"></div>
CSS
.top {
height:75px;
background-color: rgba(0, 0, 0, 0.25);
}
.bottom {
height:75px;
margin-top: -10px;
background: linear-gradient(to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 10px, /* end transparent section*/
rgba(255,0 ,0 ,0.25) 10px, /* start visible section */
rgba(255,0,0,.25) 100%);
border:1px solid black; /* added for visual reference */
z-index:-1
}
NOTE: The color stop must be the same as the amount you have moved the bottom div
Can you do the same to the top just like you do to top-
I mean -
if you have added linear-gradient(to bottom in bottom div
background: linear-gradient(to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 10px, /* end transparent section*/
rgba(255,0 ,0 ,0.25) 10px, /* start visible section */
rgba(255,0,0,.25) 100%);
then you can also also do the same for Top:
i mean do something like that with top
add this - linear-gradient(to top
background: linear-gradient(to top,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 10px, /* end transparent section*/
rgba(0,0 ,0 ,0.25) 10px, /* start visible section */
rgba(0,0,0,.25) 100%);
CHECK it here - DEMO
And i think your See More blue button will be an image. so there will be no issue with it.