CSS3 radial gradient

Question

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"

Many thanks in advance.

Answer 1

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.