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/
Related
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 have a couple questions about Linear Gradient:
Is it possible to have an actual image rather than colour display instead of either the #000000 of #ffffff?
background-image: -webkit-linear-gradient(30deg, #000000 50%, #ffffff 50%);
Also would it be possible in the above example (which is black for 50% width then a 30 degree vertical split then white for 50%), so if the image replaced #000000, is it possible to place a border on the right hand of the image along the 30 degree divide that seperated the image and colour?
Thanks!
I am not sure I got right what do you need, but here is an example.
.gradient-image {
width:128px;
height:128px;
background:
linear-gradient(to right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 60%,
rgba(0,0,0,1) 61%,
rgba(0,0,0,1) 65%,
rgba(0,0,0,0.7) 66%,
rgba(0,0,0,0.7) 100%),
url(https://i.stack.imgur.com/ZXvxw.jpg?s=128&g=1);
}
<div class="gradient-image"></div>
I am having problems inserting a background image and making my header and footer sections have a gradient background. My background image has to repeat. Does the .gif picture have to be in the same folder as the css? This is the css for it.
body {
background-image: url("folder1/pic.gif");
background-repeat: repeat-x repeat-y;
}
I am also working on a linear gradient that goes from white to orange to black. This gradient would then be the background for the header and footer sections. I am able to split and provide the header and footer section a linear gradient background but it does not extend all the way to the border of my header and footer. This is the html section for the header
<header>
<div id="eg1">
<img src="images/pumpkin.gif" alt= "pumpkin" height="78" width="85">
<h1>The Halloween Store</h1>
<h3>For the little Goblin in all of us!</h3>
</div>
</header>
The css formatting the html I have as
/*gradient header*/
#eg1 {
background-image: -webkit-linear-gradient(45deg, white 0%, #ffa500 75%, #000000 100%);
}
As you can see in this example the gradient shows fine and the background image also shows.
Be aware: On some browsers the gradient may not appear because of the browser version or the syntax.
So I used all the prefixes for gradient to be as many brosers as possible are supported:
background-image: linear-gradient(45deg, white 0%, #ffa500 75%, #000000 100%);
background-image: -webkit-linear-gradient(45deg, white 0%, #ffa500 75%, #000000 100%);
background-image: -moz-linear-gradient(45deg, white 0%, #ffa500 75%, #000000 100%);
background-image: -o-linear-gradient(45deg, white 0%, #ffa500 75%, #000000 100%);
For more about browser support check this
i have a <progress> bar and i want to color its track with a linear-gradient.
the effect i want to achieve though is having some portions of it to be transparent, so i styled it this way
progress[value]::-webkit-progress-bar {
background-image:
linear-gradient(
to right,
red 33%,
rgba(0,0,0,0) 33%,
rgba(0,0,0,0) 66%,
yellow 66%,
yellow 100%);
}
this renders as a grey bar in the 33% to 66% portion, instead of plain transparent. i've also tried using the value transparent but it does not seem to work. i still get a solid default color.
here is a fiddle: http://jsfiddle.net/0jaysLzu/
is it possible to apply transparency to the track of a progress element?
short answer background-image: should be background:
long answer
You have
progress[value]::-webkit-progress-bar {
background-image:
linear-gradient(
to right,
red 33%,
rgba(0,0,0,0) 33%,
rgba(0,0,0,0) 66%,
yellow 66%,
yellow 100%);
}
It should be
progress[value]::-webkit-progress-bar {
background:
linear-gradient(
to right,
red 33%,
rgba(0,0,0,0) 33%,
rgba(0,0,0,0) 66%,
yellow 66%,
yellow 100%);
}
I'm still learning parts of gradients, and I want to accomplish something that would enable certain colors of gradients to be certain sizes.
Example
Let's say I have a gradient with 3 colors: red, purple, and blue, in that order, from top to bottom. I want red to be around for 10%, and purple as 80%, and blue again as 10%. I have tried to create this with a JSFiddle, and it doesn't work out how I planned for it to. Along with the code I attempted to use, and the result is funky. In fact, the gradient isn't even a gradient any more, it's just goes from one color to another:
.gradient-square {
width: 100px;
height: 100px;
background: -moz-linear-gradient(red 10%, purple 80%, blue 10%);
background: -o-linear-gradient(red 10%, purple 80%, blue 10%);
background: -webkit-linear-gradient(red 10%, purple 80%, blue 10%);
background: linear-gradient(red 10%, purple 80%, blue 10%);
}
Accomplishing
What I want to accomplish is to have a gradient that starts off having, say 10px of a color, and then at the bottom is another 10px of a different color, while in between those two colors will be a single color, so the size of the element doesn't affect the length of the gradients.
Thank you for your help ahead of time.
Solution given by OP:
----- SOLVED -----
Thanks to #Joeytje50 for the help. I never thought towards how the percentages were actually used, and thank you. The correct way on what I was trying to accomplish ~ JSFiddle
.gradient-square {
width: 100px;
height: 100px;
background: -moz-linear-gradient(red 0%, purple 10%, purple 90%, blue 100%);
background: -o-linear-gradient(red 0%, purple 10%, purple 90%, blue 100%);
background: -webkit-linear-gradient(red 0%, purple 10%, purple 90%, blue 100%);
background: linear-gradient(red 0%, purple 10%, purple 90%, blue 100%);
}