Css 像这张图片一样的渐变多色

Question

我正在尝试创建一个 css div 元素，看起来像这样

（只是渐变和边框颜色，不是形状）但并没有接近它的样子。

还有可能让它与所有浏览器兼容

My attempts are in this fiddle link: https://jsfiddle.net/0bq2nxfn/

HTML :

<body>
<div class="decorator">LEVEL 17</div>
</body>

CSS

.decorator{
  background-color:blue;
  background: -webkit-linear-gradient(#7df0f8,#56caee, #604d69,#e1acea);
  background:    -moz-linear-gradient(#7df0f8,#56caee, #604d69,#e1acea);
  background:         linear-gradient(#7df0f8,#56caee, #604d69,#e1acea);
  width: 200px;
  height: 40px;
  align: center;
  text-align:center;
  border:2px solid white;
  border-radius: 40px;
  padding:10px;
  color: white;
}

Answer 1

除了渐变，您的图片还有很多其他内容。这可能与纯 css.

所能达到的最接近

body{
  background-color: #699CDE;
  font-family: Arial;
}

.glossy-button, .glossy-button > div{
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

.glossy-button{
  padding: 4px;
  background-color: white;
  display: inline-block;
}

.glossy-button > div{
  padding: 25px 64px 16px 64px;
  box-shadow: inset 0px 0px 20px 10px #40DFFE, 0px 4px 6px 0px #1a80c3;
  background: #74f2fa;
  background: -moz-linear-gradient(top, #74f2fa 0%, #3bc0ed 34%, #4b9fed 80%, #984ff7 99%);
  background: -webkit-linear-gradient(top, #74f2fa 0%,#3bc0ed 34%,#4b9fed 80%,#984ff7 99%);
  background: linear-gradient(to bottom, #74f2fa 0%,#3bc0ed 34%,#4b9fed 80%,#984ff7 99%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#74f2fa', endColorstr='#984ff7',GradientType=0 );
  color: white;
  font-size: 28pt;
  font-weight: bold;
  text-align: center;
  text-shadow: 0px 2px 4px #1e7fc7;
}

<div class="glossy-button">
  <div>Level 17</div>
</div>

Answer 2

您可以尝试使用渐变和阴影：pen

html {
  background:linear-gradient(to bottom, rgb(131, 51, 149) 2em,white, rgb(92, 151, 209) 2.1em);
  min-height:100vh;;
}

.decorator {
  background-color: blue;
  background: linear-gradient(
    to top,
    rgba(179, 99, 198, 1),
    rgb(71, 163, 238) 12px,
    rgb(71, 163, 238) 50%,
    rgb(110, 240, 249) 80%
  );
  box-shadow: inset 0 -6px 2px -4px rgb(32, 137, 201),
    inset 0 0 2px 4px rgb(138, 203, 236),
    inset 0 0 3px 5px rgb(50, 219, 246),
    0 -1px 3px 2px white;
  margin: 1em;
  width: 200px;
  line-height: 60px;
  height:40px;
  font-size:30px;
  text-align: center;
  border-radius: 60px 60px 5px 5px / 40px 40px 10px 10px;
  padding: 10px;
  color: white;
  position: relative;
  text-shadow:2px 2px 2px rgb(37, 130, 205), -1px -1px 1px rgb(37, 130, 205);
  font-family: 'Give You Glory', cursive;
  font-weight:bold;
}
.decorator:before {
  content: '';
  display: inline-block;
  border-radius: 50%;
  padding: 4px 6px;
  background: rgba(169, 238, 247, 0.7);
  position: absolute;
  top: 20%;
  left: 0.75em;
  transform: rotate(-20deg);
  box-shadow: -12px 5px 1px -2px rgba(169, 238, 247, 0.7);
}
.decorator:after {
  content:' ✵ ★ ✯';
  color:rgb(41, 116, 207);
  font-weight:bold;
  text-shadow:0 0 1px white,0 0 1px white,0 0 1px white,0 0 1px white,0 0 1px white;
  filter:drop-shadow( 0 0 1px white);
  position:absolute;
  bottom:25px;
  left:50px;
  font-size:1.1em;
  transform:rotate(-5deg);
}

<link href="https://fonts.googleapis.com/css?family=Give+You+Glory" rel="stylesheet"> 
<div class="decorator">Level 17</div>

伪元素可用于光泽效果，并最终包括来自 png 的星星、特殊字符或超棒的字体图标。

Css 像这张图片一样的渐变多色

Css gradient multi color like this image

html

javascript

css

linear-gradients