CSS Gradient Radial

Asked

Viewed 71 times

0

I need to convert an image to css, but I’m not able to generate her background using this radial gradient.

Follow picture: http://images.pcworld.com/images/article/2012/01/pcw40420ul.to20-20not20available-100310-10056081.png

It is possible to make this same background in pure css?

I tried that way, but it was nothing like:

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

css css3

  • Yes. You can [Edit] the question and add the CSS you tried to do?

  • I updated the question.

  • Ué, if you want a radial gradient, why in CSS you say you want linear?

  • http://www.colorzilla.com/gradient-editor/

  • Jeez oo, I changed there but I could not leave equal, see how it was now...

1 answer

0

You’re wearing linear gradient when actually should use radial-gradient, you can see the difference between them in WC3 website.

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 in the codepen

  • Yes, I was alerted in a comment above... Yours worked, but not as in the picture yet :/

  • the intention is not to carry out the task for you, is to show you how it works for you to apply, if you think my answer helped you arrive at the solution please mark as solved.

  • Yes, I don’t really say about the colors, note that in the image has the bg, a dark blue circle, and then white. What I don’t know how to do.

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.