Related
#myGrad {
background-image: linear-gradient(red, yellow);
}
<div id="myGrad">howdy I am fun</div>
In this code, I want to use a gradient from left to right. How can I apply left to right gradient background?
You can use different methods to achieve that, for example adding this keyword: to right. linear-gradient() docs
#myGrad {
background-image: linear-gradient(to right, red, yellow);
}
#myGrad {
background-image: linear-gradient(to right, red, yellow);
}
.myGrad{
width: 200px;
height: 200px;
}
<div id="myGrad" class="myGrad"></div>
You need only this property: background-image: linear-gradient(to right, red, yellow); if you want to left change it to ...to left,...
#grad1 {
height: 55px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, red, yellow);
}
div {
text-align:center;
margin:auto;
color:#888888;
font-size:40px;
font-weight:bold;
height:500px;
}
<div id="grad1" class="">
From left to right
</div>
The syntax of linear gradient is,
linear-gradient(direction, stop color 1 , stop color 2)
So you can write it as,
#myGrad {
background-image: linear-gradient(to right,red, yellow);
}
This question already has answers here:
How to color part of a box
(6 answers)
Closed 1 year ago.
I'm trying to show only part of the entire box.
<div class="box">30%</div>
.box{
background : linear-gradient(to right, rgba(250,0,0,0),rgba(250, 0, 0, 1));
}
The box looks like this, and I want to make only 30% of the background of the box colored and the rest transparent. I'm not trying to minimize the box to 30% width. I want the box's width to stay 100% but show only 30% of the gradient background.
If you wanna do it with the css background property, here you go:
background: background: linear-gradient(270deg, #F00 0%, rgba(255, 0, 0, 0.473958) 70.00%, rgba(255, 0, 0, 0) 70.01%, rgba(255, 0, 0, 0) 100%);
This is how it'll look line in a white background:
Notice the "70%" standing right there, it's where you can control where in the dimension you want a color to start (in this case rgba(255, 0, 0, 0) at 70% from the right border)
You can read more about it at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()#gradient_with_multi-position_color_stops
If I understand you correctly, you are wanting to have the left 70% transparent and have the gradient show only for the last 30%. If this is what you want you need to add 70% to your first colour stop as follows:
#box1{
background : linear-gradient(to right, rgba(250,0,0,0) 70%,rgba(250, 0, 0, 1));
}
#box2{
background : linear-gradient(to left, red, orange 70%, rgba(250,0,0,0) 30%);
}
#box3{
background : linear-gradient(to right, red 0%, orange 30%, white 30% );
}
.box {
margin-top: 15px;
}
<div class="box" id="box1">30%</div>
<div class="box" id="box2">30%</div>
<div class="box" id="box3">30%</div>
It looks like the OP was looking for something similar to a rainbow progress bar. There are many examples available including this one here: Progress bar different colors
Youn Can acheive it by:
css gradient background generator
with ::before and ::after
with clippath
span{
color:blue;
}
.box{
height:100px;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 30%, rgba(255,0,0,1) 30%);
}
.box2{
margin-top:30px;
position:relative;
height:100px;
}
.box2::before{
content:"";
position:absolute;
background-color:#000;
left:0;
top:0;
height:100%;
width:30%;
z-index:-1;
}
.box3{
background-color:#000;
height:100px;
margin-top:15px;
clip-path: inset(0 70% 0 0);
}
.box4{
margin-top:15px;
position:relative;
height:100px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet); /* Standard syntax (must be last) */
}
.box4::before{
content:"";
position:absolute;
top:0;
right:0;
width:70%;
height:100%;
background-color:#fff;
}
<div class="box">
<span>content<span>
</div>
<div class="box2">
<span>content<span>
</div>
<div class="box3">
<span>width clip path</span>
</div>
<div class="box4">
<span>As per your comment</span>
</div>
I found this example from a thread here in stackoverflow.
aosgibmoa bnocibnas
a{
display:inline-block;
background:#fff;
position:relative;
padding:2px 5px;
background:-webkit-gradient(linear, left top, right top, color-stop(0.5, #fff), color-stop(0.5, #000));
background-size:200% 100%;
background-position:0 0;
-webkit-transition:background-position .3s ease-out;
}
a:hover{
background-position:100% 0;
}
http://jsfiddle.net/nsfxE/1/
But I'm not sure how to change the -webkit-gradient to other vendor prefix and the normal standard one.
I want to make sure that it is somewhat modern cross browser compatible.
background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, #fff), color-stop(0.5, #000));
background-image: -moz-linear-gradient(linear, left top, right top, color-stop(0.5, #fff), color-stop(0.5, #000));
background-image: -o-linear-gradient(linear, left top, right top, color-stop(0.5, #fff), color-stop(0.5, #000));
background-image: linear-gradient(linear, left top, right top, color-stop(0.5, #fff), color-stop(0.5, #000));
I hope this is what you want.
Well, I tried out and this is my answer. Hope this can be a reference to whoever is needed.
a{
display:inline-block;
background:#fff;
position:relative;
padding:2px 5px;
background:-webkit-gradient(linear, left top, right top, color-stop(50%, #fff), color-stop(50%, #000));
background:-webkit-linear-gradient(left, #fff 50%, #000 50%);
background:-moz-linear-gradient(left, #fff 50%, #000 50%);
background:linear-gradient(to right, #fff 50%, #000 50%);
background-size:200% 100%;
background-position:0 0;
-webkit-transition:background-position .3s ease-out;
-moz-transition:background-position .3s ease-out;
transition:background-position .3s ease-out;
}
a:hover{
background-position:-100% 0;
}
http://jsfiddle.net/nsfxE/215/
Now it should work in most modern browsers.
I never put Opera prefix because I tried that and it doesn't work. Standard syntax works just fine on Opera.
I'm on my first approach with photoshop patterns.I'm buildin a webpage where I want to use my pattern to give a nice effect to my webpage background.
The pattern I found is 120x120 px
If I was done here I should use this css:
background-imag:url(mypattern.jpg);
background-repeat:repeat;
But Im not done.Id like to **add to my page's background a linear gradient(dir=top/down col=light-blue/green) with the pattern fill layer on top of it, with blending mode=darken **.
This is the final effect:
I come to the point.
QUESTION:
Combining linear vertical-gradient effect and my 120x120 pattern is it possible to find a pattern that I could use to repeat itself endlessly both vertical and horizontal??which is a common solution in this case?
Hope It's clear
thanks
Luca
or you can use background gradinent css3
body { background: url('pattern.jpg') repeat;}
#container {
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
}
to make it work in IE lte 7 add:
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FFFFFFFF', EndColorStr='#00FFFFFF')
color is provided in #aarrggbb format, where aa=alpha(transparency), rest like normal hex color.
Apply
html{
background: url('mypattern.jpg') repeat;
}
body{
background: url('gradient.png') repeat-x;
width:100%;
height:100%;
}
where gradient.png is your white gradient which becomes transparent to it's bottom.
Dis will work, bg pattern with linear or radial gradient:
background-image: url(images/pattern.png), -webkit-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
background-image: url(images/pattern.png), -moz-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
background-image: url(images/pattern.png), -ms-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
background-image: url(images/pattern.png), -o-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
background-image: url(images/pattern.png), radial-gradient(circle at 30% 40%, rgb(20,150,224), rgb(0,0,0));
I want to have a gradient in HTML/CSS.
Assume some DIV is always more than 400px tall. I want to add the gradient so that it is #FFFFFF at the top and #EEEEEE at 300px. So the first 300px (height-wise) is a nice 'white to grey' gradient. After 300px, regardless of how tall the DIV goes, I want the background color to stay #EEEEEE.
I guess this has something to do with gradient stops (?)
How can I do it?
P.S. If it is not possible in IE I don't care. I am fine if gecko and webkit browsers show this properly.
background-color: #eee;
background-image: linear-gradient(top, #fff 0%, #eee 300px); /* W3C */
background-image: -moz-linear-gradient(top, #fff 0%, #eee 300px); /* FF3.6+ */
background-image: -webkit-linear-gradient(top, #fff 0%, #eee 300px); /* Chrome10+,Safari5.1+ */
This is according to the current Mozilla documentation: https://developer.mozilla.org/en/CSS/-moz-linear-gradient.
I've confirmed that it works in Firefox 3.6 and Chrome 15.
Alternative way
background-color: #eee;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent));
background-image: -webkit-linear-gradient(top, #fff, transparent);
background-image: -moz-linear-gradient(top, #fff, transparent);
background-image: -o-linear-gradient(top, #fff, transparent);
background-image: linear-gradient(to bottom, #fff, transparent);
background-repeat:no-repeat;
background-size:100% 300px;
height: 400px;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee), color-stop(0.75, #eee));
You might have to play with 0.75 as it's a percentage of your height, but that should do the trick.
First, it's good to know that you can use more than 2 color-stop on gradients, but you can't use fixed pixels as coordinates, it has to be a percentage.
In your case, you can simply define your first color-stop at 0% and the second one at 50% or so. I suggest you to use a gradient generator because the implementation depends on the browser.
I came up with
background: #FFFFFF; /* old browsers*/
background: -moz-linear-gradient(top, #FFFFFF 0%, #EEEEEE 50%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(50%,#EEEEEE)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EEEEEE', GradientType=0); /* ie */
background: -moz-linear-gradient(top, #d7d7d7 0px, #f3f3f3 178px);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0px,#d7d7d7), color-stop(178px,#f3f3f3));
background: -webkit-linear-gradient(top, #d7d7d7 0px,#f3f3f3 178px);
background: -o-linear-gradient(top, #d7d7d7 0px,#f3f3f3 178px);
background: -ms-linear-gradient(top, #d7d7d7 0px,#f3f3f3 178px);
background: linear-gradient(top, #d7d7d7 0px,#f3f3f3 178px);
this works for me
The easiest solution for the problem is to simply use multiple backgrounds and give the gradient part of the background a defined size, either in percentage or in pixels.
body {
background: linear-gradient(to right, green 0%, blue 100%), green;
background-size: 100px 100%, 100%;
background-repeat: no-repeat;
background-position: right;
}
html,
body {
height: 100%;
margin: 0;
}
Mix and match with browser prefixes as necessary.
You could do a:
<div id="bgGen"></div>
then
#bgGen{
height: 400px;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee), color-stop(0.75, #eee));
margin-bottom:-400px;
}
It is kinda cheating, but it works...
I had the same thing just now. I wanted to put a gradient on the main content div which varied significantly in height from page to page.
I ended up with this and it works great (and not too much extra code).
CSS:
.main-container {
position: relative;
width: 100%;
}
.gradient-container {
/* gradient code from 0% to 100% -- from colorzilla.com */
height: 115px; /* sets the height of my gradient in pixels */
position: absolute; /* so that it doesn't ruin the flow of content */
width: 100%;
}
.content-container {
position: relative;
width: 100%;
}
HTML:
<div class="main-container">
<div class="gradient-container"></div> <!-- the only thing added for gradient -->
<div class="content-container">
<!-- the rest of my page content goes here -->
</div>
</div>
I highly recommend using colorzilla's gradient-editor to generate the CSS. It makes cross-browser optimizing really easy (especially if you're used to Photoshop or Fireworks).
this worked for me
background: rgb(238, 239, 240) rgb(192, 193, 194) 400px;
background: -webkit-linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px);
background: -moz-linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px);
background: linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px);
background-repeat:repeat-x; background-color:#eeeff0;
Also someone commented why not just make a gradient image and set it as the background. I prefer to go mostly css now too, with mobile design and limited data usage for visitors, try to limit as much images as possible. If it can be done with css than do it