How can generate rectangular using gradient in CSS?
My expectation is like this picture
you can try this code to make rectangle by making a div and class as rectangle,
.rectangle {
width: 400px;
height: 200px;
background: linear-gradient(to left bottom, rgb(84, 255, 84), #329600, rgb(124, 124, 124));
}
you can change the direction of color also.
I guess that what you are looking for is a linear gradient. I recomand you to try this web site : https://cssgradient.io/ to easly visualize the render of the css property
background: linear-gradient
I tried to reproduce what was on your exemple and I get this css code
.exemple{
width:200px;
height: 150px;
background: rgb(40,83,62);
background: -moz-linear-gradient(150deg, rgba(40,83,62,1) 5%, rgba(156,200,151,1) 80%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(150deg, rgba(40,83,62,1) 5%, rgba(156,200,151,1) 80%, rgba(255,255,255,1) 100%);
background: linear-gradient(150deg, rgba(40,83,62,1) 5%, rgba(156,200,151,1) 80%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#28533e",endColorstr="#ffffff",GradientType=1);
}
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<body>
<div class="exemple"></div>
</body>
</html>
Hope this helps !!
Related
I created small web page:
<!DOCTYPE html>
<html>
<head>
<style>
html
{
position: fixed;
}
body {
background: radial-gradient(ellipse at center, rgba(141,141,141,0) 0,rgba(141,141,141,1) 100%);
}
</style>
</head>
<body>
<p>TEST</p>
</body>
</html>
It's small example to illustrate problem but I have bigger application where is the same. When I add position: fixed to html tag gradient on body tag stops working. It works fine on Google Chrome, Internet Explorer, Microsoft Edge but not on Firefox. I can add that when a change gradient to background-color or backgorund-image it works fine. Firefox version:53.0.3. Do you have any ideas how to deal with that?
Firefox had some bugs related to radial gradient, so try with below syntax
background: radial-gradient(ellipse at 50% 50%, #ffffff 0%, #8D8D8D 100%);
or background: radial-gradient(ellipse at center, #ffffff 0%, #8D8D8D 100%);
or Try with -moz- suffix,
background: -moz-radial-gradient(ellipse at center, rgba(141,141,141,0) 0, rgba(141,141,141,1) 100%);
background: radial-gradient(ellipse at center, rgba(141,141,141,0) 0, rgba(141,141,141,1) 100%);
I am having two colors with me, red and yellow. According to Linear-gradient Format, if we insert red and yellow, automatically smooth transition occurs between them. If i dont want smooth transition, how can we represent them in code? Below code is with smooth transition, but i dont want smooth transition between those two colors. Any Help Please
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: linear-gradient(red, yellow);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
you can
.tg {
height: 75px;
width: 400px;
background-image: linear-gradient(135deg, red 60%, yellow 60.5%);
}
<div class='tg'></div>
demo
Use this:
background: linear-gradient(to bottom, red 0%,red 50%,yellow 51%,yellow 100%);
Demo URL now returns 404
Why dont you just make 2 divs one above the other then?
#grad1 {
height: 100px;
background: red;
}
#grad2 {
height: 100px;
background: yellow;
}
See it working here: https://jsfiddle.net/eosx5cgc/
CSS3 gradient we can simply generate in online tools, like colorzilla
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff0000+0,ff0000+50,ffff00+51,ffff00+100 */
background: rgb(255,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 50%, rgba(255,255,0,1) 51%, rgba(255,255,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 50%,rgba(255,255,0,1) 51%,rgba(255,255,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 50%,rgba(255,255,0,1) 51%,rgba(255,255,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffff00',GradientType=0 ); /* IE6-9 */
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
I'm trying to add css radial gradient as background to my webpage, when I add html5 doctype <!DOCTYPE html> the radial background becomes (landscape) stripe. Is there wrong with my css radial-gradient code why it is not working well with HTML5
Output:
with html5 doctype <!DOCTYPE html>
Without html5 doctype
My code (no html5 doctype):
HTML
<!-- <!DOCTYPE html> -->
<!-- header -->
<body>
<div class="content"></div>
</body>
CSS
body {
background: rgba(32,61,227,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(32,61,227,1) 0%, rgba(10,38,69,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(32,61,227,1)), color-stop(100%, rgba(10,38,69,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(32,61,227,1) 0%, rgba(10,38,69,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(32,61,227,1) 0%, rgba(10,38,69,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(32,61,227,1) 0%, rgba(10,38,69,1) 100%);
background: radial-gradient(ellipse at center, rgba(32,61,227,1) 0%, rgba(10,38,69,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#203de3', endColorstr='#0a2645', GradientType=1 );
}
Adding <!DOCTYPE HTML> seems to minimize the height of html and body to 0%
Try adding this to your CSS
html, body {
height: 100%;
}
This will solve your issue
Is there a way to create a background without the use of any actual image files that has a gradient that looks like this?
Not the wood panel texture, but how the left and right are darker and then get lighter as they go inwards.
Box Shadows
You can accomplish this with box-shadow or radial-gradient. Let's look at the first option:
.box {
width: 300px; height: 300px;
box-shadow: inset 0 0 5em 1em #000;
background: url("http://lorempixel.com/300/300");
}
This uses an inset shadow which overlays the elements background image. The effect resembles your example photo:
Radial Gradients
You can do this pretty easily using several linear gradients, or a radial gradient:
html {
min-height: 100%;
background:
radial-gradient(transparent, black),
url("http://lorempixel.com/500/500");
background-size: cover;
}
Fiddle: http://jsfiddle.net/jonathansampson/t8N5M/
If your browser supports gradients, cover, and multiple backgrounds, you'll see something like this:
You can use this online editor to generate gradients of different orientation like radial, horizontal etc. you can also control the opacity of your gradient.
here is JSFiddle link http://jsfiddle.net/banded_krait/AZK5d/2/
as a web designer, i love the result of interstellarDust's code.
Reasons:
The stop points of gradients are customizable. so the radial gradients
would give me a nice & round vignette not like the square shape gradient from box shadow inset's effect.
The 0% opacity of center area help my audiences easy to focus at the center of image. (but if you plan to put an overlay bright color text, thicker opacity vignette background will make the text more readable.)
i've messed with gradients stop points and opacity of interstellarDust's code here:
#img_container{
position:relative;
z-index:-1;
width:400px;
height:400px;
}
#img_container img{
position:relative;
height:100%;
width:100%;
z-index:4;
}
.gradient{
position:absolute;
left:0px;
top:0px;
z-index:5;
height:100%;
width:100%;
/* http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+50,0.5+100 */
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Vignette with background gradients</title>
</head>
<body>
<p>Original by banded_krait</p>
<div id="img_container">
<img src="http://lorempixel.com/400/400" alt="" />
<div class="gradient"></div>
</div>
</body>
</html>
I've been trying to create a radial background, except for some reason all I can get is a line. I have no idea what I'm doing wrong, any ideas?
Jsfiddle: http://jsfiddle.net/3QSFj/1/
CSS:
background: -webkit-gradient(radial, circle, 0, circle, 70, color-stop(0%, #718aa7), color-stop(70%, #203044));
background: -webkit-radial-gradient(circle, #718aa7 0%, #203044 70%);
background: -moz-radial-gradient(circle, #718aa7 0%, #203044 70%);
background: -o-radial-gradient(circle, #718aa7 0%, #203044 70%);
background: radial-gradient(circle, #718aa7 0%, #203044 70%);
Set your body height to 100%, your body element is empty, and thus it doesn't have any height, the background is simply repeated there.. Bad Demo
html, body {
height: 100%;
}
Demo
Also, you background will be repeated, so you will need background-attachment: fixed; as well as background-repeat: no-repeat
Demo 2