Background gradient

HTML & CSS
1

Hey guys! Anyone have an idea on how to achieve a gradient such as this? http://prntscr.com/bpeqyp
I am trying to use it as baackground :slight_smile: Thanks for all the help!

2

In that example it is actually an image. But it could be done with a css radial gradient.

1 Like
3

Hey! I don’t think it is an image :stuck_out_tongue: Here is the source of where I found it! http://codepen.io/robertmesserle/pen/Lebco. I am trying to remake it. I am not that good at messing around with gradients, that’s why I came here :slight_smile:

4

And here is the image PNG file:-
http://image.prntscr.com/image/8cd933c97d774e0692ce59e7f604289a.png
Left-click, View Image.

That codepen should give you some clue. But for a fuller explanation the article in the link I posted should help.

2 Likes
5

This is a great tool for generating the CSS for gradients.

6

Just view the compiled source on that demo and the code is there.

Here’s a full page radial background that can be used with variable height content.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	height:100%;
	margin:0;
	padding:0
}
body:after {
	content:"";
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	top:0;
	z-index:-1;
	background: -webkit-radial-gradient(center, #dc143c, #580818);
	background: -moz-radial-gradient(center, #dc143c, #580818);
	background: -o-radial-gradient(center, #dc143c, #580818);
	background: -ms-radial-gradient(center, #dc143c, #580818);
	background: radial-gradient(center, #dc143c, #580818);
}
</style>
</head>

<body>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</body>
</html>
1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.