css radial-gradient draw gradient background

radial-gradient is a cool css property. We can use it to draw a very sensible gradient background to the element. If you don't use it often, you'll find that its syntax is not easy to remember, and is slightly more complicated than linear-gradient(). This article takes you to appreciate its charm through 2 examples.

gradient background color

 <div class="hire_wrapper"></div>

 .hire_wrapper {
  background: radial-gradient(circle at 22% 5%, rgb(85, 55, 101), rgb(30, 38, 74) 76%);
  height: 100vh;
}

It can be rendered in the browser with the following background gradient:
radial-gradient

Online demo address

Highlight text

 <h1>Syncopate</h1>

 @import url(https://fonts.googleapis.com/css?family=Syncopate);

body {
  height: 100vh;
  background: radial-gradient(
    circle closest-corner at center 125px,
    #222,
    black 40%
  ) no-repeat;
  text-align: center;
}
h1 {
  display: inline-block;
  padding-top: 100px;
  font-family: 'Syncopate', sans-serif;
  text-transform: uppercase;
  background: radial-gradient(
    circle farthest-corner at center center,
    #ccc,
    #333
  ) no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Renders the following result: