グラデーションカラーを作成するには

Question

グラデーションを使ってこの背景色を習得するにはどうすればいいですか？

注：針、目盛り、ラベルは不要です。閉じる

Answer 1

えっ？

完全にCSSの内訳が必要な場合はお知らせくださいが、個人的には以前はCSSで放射状のグラデーションを使用していませんでしたが、うまくいくようです。

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>

---

Answer 2

私はradial gradientまたはプロパティのいずれかを使用しても同様の効果を生成することができています。

注1：勾配は、異なるブラウザ間でrendered differentlyです。注2

：

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

：box-shadowプロパティでも多くblurはbad for performance

例（あなたの最後のいくつかの微調整が必​​要になる場合があります）です推薦状ですか？この場合、CSSの代わりにイメージを使用してください。

Answer 3

radial-gradientで取得できます。

以下、私はそれを得るための実例を掲載しました。radial-gradientプロパティで再生して、その動作を理解することができます。

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>