0

El problema es que me gustaría hacer un degradado radial dentro de un div en forma de círculo y que éste entienda los límites del círculo como los límites del div para poder controlar perfectamente cómo llega el degradado a los bordes de la circunferencia.

Es esto posible o siempre actúa como si se tratase de un cuadrado?

También me gustaría saber si es posible colocar de forma excéntrica el punto de inicio del degradado radial dentro del círculo. Muchas gracias.

2
  • No está muy claro qué es lo que quieres. Añade una imagen que muestre que es lo que buscas y comparte el código con lo que hayas intentado
    – Alvaro Montoro
    Commented el 18 may. 2016 a las 13:28
  • Podrías poner un ejemplo del código que estas usando para entender mejor a que te refieres con que el degradado radial actual como si fuese un cuadrado?
    – devconcept
    Commented el 18 may. 2016 a las 15:18

2 respuestas 2

1

A ver si este otro ejemplo se ajusta más a lo que quieres conseguir:

.circle {
  background-position: 200px 0px;
  background-image: -webkit-radial-gradient(90px 90px, circle cover, white , red 10%, rgba(0,0,0,0) 20%);
  background-image: -moz-radial-gradient(90px 90px 45deg, circle cover, white 0%, red 10%, rgba(0,0,0,0) 20%);
  background-image: radial-gradient(90px 90px 45deg, circle cover, white 0%, red 10%, rgba(0,0,0,0) 20%);
  width: 400px;
  height: 400px;
  z-index: -1000;
  background-color: rgba(100,100,240,1);
}
.content{
  color: white;
  font-weight: bold;
  padding: 15px;  
}
<div class="circle">
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

No es una maravilla pero es que estamos hablando de CSS no de Photoshop :)

3
  • Sí Asier muchas gracias
    – Ivan Soler
    Commented el 18 may. 2016 a las 15:08
  • Deberías incluir -moz-radial-gradient en tu ejemplo. No se ve nada en lo absoluto si usas firefox. ;)
    – devconcept
    Commented el 18 may. 2016 a las 15:29
  • Tienes toda la razón. Lo edito Commented el 18 may. 2016 a las 15:33
0

Lo que puedes hacer es un elemento redondo aplicándole un border-radius de 50% y aplicarle el fondo con el degradado. Para utilizarlo como fondo podrías jugar con el posicionamiento absoluto y un z-index bajo:

.circle {
  border-radius: 50%;
  background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
  background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
  background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
  position: absolute;
  left: 0;
  top: 0;
  width: 400px;
  height: 400px;
  z-index: -1000;
}
.content{
  width: 400px;
  height: 400px;
  padding: 90px;
  font-size: 18px;
  font-weight: bold;
}
<div class="circle"></div>
<div class="content">
  <span>Lorem ipsum dolor sit amet,<br/>
    consectetur adipiscing elit,<br/>
    sed eiusmod tempor incidunt ut<br/>
    labore et dolore magna aliqua.</span>
</div>

3
  • Vale Asier, gracias, el problema para mí sigue siendo que el fundido con el fondo (si sustituímos orange por white) no se produce de una forma suave sino que se aprecia perfectamente el borde del círculo. ¿Me entiendes?
    – Ivan Soler
    Commented el 18 may. 2016 a las 10:59
  • Igual si pones una imagen de lo que quieres conseguir resulta más fácil Commented el 18 may. 2016 a las 11:11
  • Algo así Asier: i.ytimg.com/vi/6GyJZoep6rc/…
    – Ivan Soler
    Commented el 18 may. 2016 a las 11:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.