CODEWITHSUNDEEP
javascripthtmlcsslinear-gradients
Ashish Kumar
Ashish Kumar

Reputation: 136

Css gradient multi color like this image

I am trying to create a css div element that looks like this

reference

( just the gradient and border colors , not the shape) but not getting any close to what it looks like.

Also is it possible to make this compatible with all browser

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;
}

Upvotes: 0

Views: 359

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105893

you can play around with gradient and shadows: 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>

pseudo element can be used for the glossy effects and eventually include stars from a png , special characters or font-awesome icons.

Upvotes: 1

Manuel Otto
Manuel Otto

Reputation: 6540

There's alot more going on in your picture than just gradients. This is probably as close as you can get with pure 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>

Upvotes: 0

Related Questions