0

Preciso converter uma imagem para css, mas não estou conseguindo gerar o background dela usando esse radial gradient.

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

É possível fazer esse mesmo background em css puro?

Tentei dessa forma, mas não ficou nada parecido:

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

5
  • Sim. Pode editar a pergunta e adicionar o CSS que tentou fazer?
    – Woss
    28/07/2017 às 1:06
  • Atualizei a pergunta.
    – Clebson
    28/07/2017 às 1:39
  • Ué, se quer um gradiente radial, por que no CSS você diz que quer linear?
    – bfavaretto
    28/07/2017 às 1:44
  • colorzilla.com/gradient-editor
    – bfavaretto
    28/07/2017 às 1:49
  • Eita oO, eu alterei ali mas não consegui deixar igual, veja como ficou agora...
    – Clebson
    28/07/2017 às 1:52

1 Resposta 1

0

Você esta usando linear gradiente quando na verdade deveria usar radial-gradient, você pode ver a diferença entre eles no site da 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>

Você também pode ver funcionando no codepen

3
  • Pois é, me alertaram em um comentário acima... O seu funcionou, mas não ficou como na imagem ainda :/
    – Clebson
    28/07/2017 às 1:56
  • a intenção não é realizar a tarefa para você, é te mostrar como funciona para que você aplique, se você acha que minha resposta te ajudou a chegar na solução por favor marque como resolvido.
    – RFL
    28/07/2017 às 1:58
  • Sim, na verdade não digo em relação às cores, note que na imagem tem o bg, um circulo azul mais escuro, e ai o branco. Isso que não sei fazer.
    – Clebson
    28/07/2017 às 2:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .