Michael Rudner Evanchik Michael Rudner Evanchik - 1 year ago 94
CSS Question

CSS3 radial gradient

I need to know if this is even possible. The "creative" photoshop department comes up with this image, and before it was just a gradient fading from 1 to 5 colors. They still do this, but they now how a white circle on top of it. How would i even go about accomplishing this. the examples syntax have no exact positioning. On top of the white circle i need to add specific font and text "in the white"

enter image description here

Many thanks in advance.

Answer Source

It might be simpler to go with multiple overlaid gradients as a background.

The first a simple linear gradient, left to right, and a second radial gradient on top.

Then it's just a matter of positioning (absolutely) your text element over the white circle (remember you know where it's positioned)

A quick and dirty demo:

div {
  height: 350px;
  width: 90%;
  margin: 1em auto;
  border: 1px solid lightgrey;
  background: 
    radial-gradient(circle closest-side at 75% 50%, white, white 60%, transparent), 
    linear-gradient(to right, #344862, white 75%, yellow);
  position: relative;
}
span {
  position: absolute;
  left: 75%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div>
  <span>Lorem ipsum dolor.</span>
</div>

Note: how the positioning of the radial gradient center is the same as the positioning of the <span>. The transform just ensures that the text is centered in the circle.