CODEWITHSUNDEEP
cssgradientlinear-gradients
Akbar Basha
Akbar Basha

Reputation: 1198

How to create gradient color

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.

enter image description here

Upvotes: 1

Views: 323

Answers (3)

I haz kode
I haz kode

Reputation: 1635

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.

Upvotes: 2

LKG
LKG

Reputation: 4192

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.

Working fiddle

Radial gradient

.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>

Upvotes: 3

Rico Kahler
Rico Kahler

Reputation: 19302

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>

Upvotes: 2

Related Questions