I need to create the background color as like an below image.. how to acheive this background color using gradient?
Note: just background color for that pic no need for needle, tick and label.
2
-
It looks like you're looking for a radial gradient. maybe this helps. Do you also want those shiny highlights? (IMO, they look bad)Rico Kahler– Rico Kahler2017-06-28 04:09:12 +00:00Commented Jun 28, 2017 at 4:09
-
@RicoKahler thanks will check (y)Akbar Basha– Akbar Basha2017-06-28 04:17:14 +00:00Commented Jun 28, 2017 at 4:17
Add a comment
|
3 Answers
You can get it by using radial-gradient.
Below i posted a working example to get it, You can play with radial-gradient properties to understand how it's work.
.round {
width:300px;
height:300px;
border-radius:50%;
background: rgba(0,0,0,0.8);
background-image:radial-gradient(circle at 50% 30%,#cacaca,#333);
-webkit-background-image:radial-gradient(circle at 50% 30%,#cacaca,#333);
position:relative;
overflow:hidden;
}
.round:after, .round:before {
content:'';
width:100%;
height:100%;
position:absolute;
border-radius:50%;
}
.round:before {
left:0;
top:30px;
transform: rotate(22deg);
transform-origin: -13% 52%;
-webkit-transform-origin: -13% 52%;
background-image: radial-gradient(circle at -11% 30%,#333,#999);
background-image: -webkit-radial-gradient(circle at -11% 30%,#333,#999);
opacity:0.2;
}
.round:after {
right:0;
top:30px;
transform: rotate(22deg);
transform-origin: 22% 125%;
-webkit-transform-origin: 22% 125%;
background-image: radial-gradient(circle at -45% 30%,#999,#333);
-webkit-background-image: radial-gradient(circle at -45% 30%,#999,#333);
opacity:0.2;
}<div class="round"></div>
Comments
Close eh?
Let me know if you need fuller CSS breakdown but personally, I've never used radial gradients in CSS before but it seems to work well.
Here's what I used as a reference.
.container {
position: relative;
width: 300px;
height: 300px;
}
.radial-gradient {
position: absolute;
width: 100%;
height: 100%;
border-style: soild;
border-width: 5px;
border-radius: 50%;
background-image: radial-gradient(circle at 50% 30% , #C3C3C3 0%, #000000 100%);
}<div class="container">
<div class="radial-gradient">
</div>
</div>
Comments
I am able to produce a similar effect using either a radial gradient or the box-shadow property.
Note 1: gradients are rendered differently across different browsers.
Note 2: too much blur in the box-shadow property is bad for performance
Examples (might need some fine-tuning on your end):
.circle {
height: 250px;
width: 250px;
border-radius: 100vw;
background: white;
margin: 1em auto;
}
.gradient {
background-position: -55px -86px;
background-image: radial-gradient(circle, rgb(249, 249, 249) -4%, #000000 81%);
background-repeat: no-repeat;
background-size: 136%;
}
.box-shadow {
box-shadow: inset -7px -28px 140px 48px rgba(0, 0, 0, 0.75);
}
.sample {
text-align: center;
border: 1px solid #444;
width: 300px;
margin: 1em;
}<div class="sample">Gradient
<div class="circle gradient"></div>
</div>
<div class="sample">Box-shadow
<div class="circle box-shadow"></div>
</div>Recommendation? Use a an image instead of CSS in this case.
