CSS Gradient Radial

Navigation
0

I need to convert an image to css, but I can not generate the background of it using this radial gradient.

Follow the picture: link

Is it possible to make this same background in pure css?

I tried it that way, but it did not look anything like this: 

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Documento sem título</title>
    
    <style type="text/css">
body {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7db9e8+0,207cca+49,2989d8+50,1e5799+100 */
background: rgb(125,185,232); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(125,185,232,1) 0%, rgba(32,124,202,1) 49%, rgba(41,137,216,1) 50%, rgba(30,87,153,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(125,185,232,1) 0%,rgba(32,124,202,1) 49%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(125,185,232,1) 0%,rgba(32,124,202,1) 49%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  background-attachment: fixed;
}

</style>
    </head>
    
    <body>
    </body>
    </html>
    
asked by anonymous 28.07.2017 / 02:56

1 answer

0

You're using linear gradient when you should actually use radial-gradient , you can see the difference between them in the site of WC3 . 

body {
  height: 100vh;
  background: radial-gradient(#7db9e8, #1e5799);
  background-repeat: no-repeat;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

img {
  border-radius: 100px;
}
<img src="http://placehold.it/150x150"alt="">
<h1>Titulo</h1>
<h2>Subtitulo</h2>

You can also see working on codepen

    
28.07.2017 / 03:54
Splash screen React-native Image is not centering