I'm trying to replicate the following gradient in CSS:
The best I've managed to do is:
background:
radial-gradient(ellipse at 20% 20%, #35234b 0%, transparent 70%),
radial-gradient(ellipse at 60% 20%, #2975bf 0%, transparent 70%),
radial-gradient(ellipse at 100% 20%, #3d54b1 0%, transparent 70%),
radial-gradient(ellipse at 100% 100%, #9f3c54 0%, transparent 70%),
radial-gradient(ellipse at 20% 100%, #362d6f 0%, transparent 70%);
background-blend-mode:screen;
which isn't that close:
Is it possible to get even closer to the gradient in the image? (It doesn't have to be CSS, Javascript is also valid, or even an external library. But pure CSS is preferred.)
body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
background:
radial-gradient(ellipse at 20% 20%, #35234b 0%, transparent 70%),
radial-gradient(ellipse at 60% 20%, #2975bf 0%, transparent 70%),
radial-gradient(ellipse at 100% 20%, #3d54b1 0%, transparent 70%),
radial-gradient(ellipse at 100% 100%, #9f3c54 0%, transparent 70%),
radial-gradient(ellipse at 20% 100%, #362d6f 0%, transparent 70%);
background-blend-mode:screen;
}
You were really close, start anticlockwise from the left bottom color,
and don't use mix-blend mode- to get rid of artifacts.
body {
font: 16px/1.4 sans-serif; letter-spacing: 0.12em;
min-height: 150vh;
padding: 2em;
margin: 0;
color: hsla(0, 0%, 100%, 0.85);
background-color: #170d24;
background-image:
radial-gradient(ellipse at 10% 90%, #3c2d83 0%, transparent 55%),
radial-gradient(ellipse at 90% 90%, #c33c65 0%, transparent 55%),
radial-gradient(ellipse at 90% 10%, #4a74dc 0%, transparent 55%),
radial-gradient(ellipse at 10% 10%, #35244f 0%, transparent 55%);
}
<b>ETHEREUM</b> 2.0
<h1>Your Gateway<br>into Blockchain</h1>
<p>Scroll down... and to the moon!</p>
Thanks to Temani Afif's suggestion I came up with the following. Still not exact, but way closer than before. If anyone wants to improve on this, it's very much welcome.
body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
background:linear-gradient(to right, #35234b 0% 10%,#2975bf 60% 70%,#3d54b1 80% 100%);
}
body::before{
content:""; display:block; height:100%;
background:linear-gradient(to right, #362d6f,#9f3c54);
-webkit-mask:linear-gradient(to bottom,transparent, #fff);
mask:linear-gradient(to bottom,transparent, #fff);
}
Related
I'm currently trying to recreate the following background design:
I have tried many variations from using linear-gradient to conic-gradients. I wasn't able to make this using CSS only.
Is it possible to create this background using CSS only? If yes, could someone point me to the right direction?
I would like to avoid using a background image here
You could use CSS background as several radial-gradients:
* { margin: 0; box-sizing: border-box; }
body {
font: 16px/1.4 sans-serif; letter-spacing: 0.12em;
min-height: 100vh;
background-image:
radial-gradient(circle at 20% 20%, hsla(100, 60%, 30%, 0.2) 0%, transparent 30%),
radial-gradient(circle at 40% 30%, hsla(150, 60%, 30%, 0.2) 0%, transparent 30%),
radial-gradient(circle at 60% 40%, hsla(250, 60%, 30%, 0.2) 0%, transparent 30%),
radial-gradient(circle at 80% 50%, hsla(340, 60%, 30%, 0.2) 0%, transparent 30%);
}
Is it possible to get a similar result with CSS Gradients? Can you use 2 gradients on one div and can the radial one have a center outside the div?
It is definitely possible to add more than one gradient to an element (even a combination of linear and radial gradients) by providing them in comma separated format like in the below snippet. The gradient that is specified first (from the right side) forms the bottom most layer while that which is specified last comes on top. Key thing to note is that the gradient (on top) must have colors with alpha less than 1 to be able to show the colors in the lower layers.
Coming to the second part of the question, radial gradients can be created such that their center point is outside the div. This can be done by specifying negative values for the position.
The gradient in the below snippet does not tally 100% with the image provided in question but you can get the idea.
div{
height: 200px;
width: 150px;
border: 1px solid;
border-radius: 12px;
background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.7)), radial-gradient(ellipse at -40% -50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.7) 50%);
background-size: 180% 200%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='gradient'></div>
Try this
.color background: rgba(249,124,102,1);
background: -moz-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(249,124,102,1)), color-stop(50%, rgba(246,160,147,1)), color-stop(51%, rgba(248,85,63,1)), color-stop(71%, rgba(243,93,73,1)), color-stop(100%, rgba(236,98,85,1)));
background: -webkit-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
background: -o-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
background: linear-gradient(135deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f97c66', endColorstr='#ec6255', GradientType=1 );
}
.rounded_rec {
width: 150px;
height: 150px;
border-radius: 5px;
border: 1px solid red;
background-color: black;
}
Html
<div class="rounded_rec color">
</div>
Kindly check this link
Check this link also
Check this link and let me know is this what you want
I'm trying to achieve the following using CSS: (focus on the middle part of the photo)
My first attempt was something like:
<div style="background:blue;height:200px"></div>
<div style="background: linear-gradient(blue 50%, #ffffff 50%);>
<img...><img...><img...>
</div>
But then I have no way to create the colored line in the middle.
(Correct me if I'm wrong?)
I assume a better way would be to create a 50% height div, and then creating a floating div for the photos.
I use bootstrap which is not great for vertical align, so I tried using this FlexBox.
Any help would be very appreciated, thanks.
You can specify more than one background image (including gradients) for one element, e.g.
html, body {
height: 100%;
min-height: 350px;
margin: 0;
}
body {
background-color: #006;
background-image:
linear-gradient(to right, #f00, #ff0 25%, #0f0 50%, #0ff 75%, #00f),
linear-gradient(to top, #fff, #fff),
radial-gradient(circle closest-side at center,
rgba(255,255,255,1) 0%, rgba(255,255,255,1) 39%,
rgba(255,255,255,.7) 40%, rgba(255,255,255,.7) 59%,
rgba(255,255,255,.4) 60%, rgba(255,255,255,.4) 79%,
rgba(255,255,255,.1) 80%, rgba(255,255,255,.1) 99%,
rgba(255,255,255,.0) 100%),
radial-gradient(circle closest-side at center,
rgba(255,255,255,1) 0%, rgba(255,255,255,1) 39%,
rgba(255,255,255,.7) 40%, rgba(255,255,255,.7) 59%,
rgba(255,255,255,.4) 60%, rgba(255,255,255,.4) 79%,
rgba(255,255,255,.1) 80%, rgba(255,255,255,.1) 99%,
rgba(255,255,255,.0) 100%);
background-size: 100% 4px, 100% 50%, 62.5% auto, 62.5% auto;
background-repeat: no-repeat;
background-position: 50% 50%, 50% 100%, 0 50%, 100% 50%;
}
I'm trying to overlay 2 different gradients, without using any image:
one repeatable gradient (6px by 6px) that makes an hash-like image.
one vertically transparent gradient all over the page (100% to 0%).
Here is the code I tried unsuccefully:
html{
background: -moz-linear-gradient(top, transparent 0%, #FFFFFF 100%);
background-repeat: no-repeat;
background-attachment: fixed;
}
body{
background: -moz-linear-gradient(45deg, #C6C6C6 0%, #C6C6C6 25%, #FFFFFF 25%, #FFFFFF 50%, #C6C6C6 50%, #C6C6C6 75%, #FFFFFF 75%, #FFFFFF 100%);
background-size: 6px 6px;
}
Any idea is this is possible ?
Here's what I'm trying to do: A solid grey background with a semi-eclipse (i.e. half an eclipse) of light starting from the centre of the page and ending at the top, so it looks as if there is a torch shining upwards from the centre of the page.
I've tried using SVG instead of css as I thought it might be easier, but I've ran into a few problems. Can anyone point me in the right direction?
Edit: Here's an image of what I'm trying to achieve:
You can use a radial-gradient as the background image like this:
html {
background: #ccc;
background: -moz-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: -webkit-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: -ms-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: -o-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
min-height: 100%;
}
This works by placing the center of the gradient 50% above the page (note the -50% second parameter.) combined with the cover size attribute.
You can read more about the CSS radial-gradient property at MDN.
Here is an example: http://jsfiddle.net/kUFNV/4/
Why not use a CSS gradient? Here:
background: #f9f9f9;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmOWY5ZjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjY2RjZGNkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #f9f9f9 0%, #cdcdcd 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f9f9f9), color-stop(100%,#cdcdcd));
background: -webkit-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: -o-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: -ms-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: radial-gradient(ellipse at center, #f9f9f9 0%,#cdcdcd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#cdcdcd',GradientType=1 );
Then add a margin-top: -50%; CSS to the element with the background. I don't suggest this is the body element as it'll get a bit messy, but create a new element with absolute positioning, give it the gradient code and the -50% margin and z-index: -1; so it'll be under all the rest of the page.
Good luck!
I'd recommend playing around with one of the CSS3 gradient generators like this one. With a few different color stops on a radial gradient, you should be able to accomplish something pretty close.
Here's one I put together quickly: http://jsfiddle.net/43k6F/