Michael Rudner Evanchik Michael Rudner Evanchik - 8 months ago 70
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.


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;
    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%);
  <span>Lorem ipsum dolor.</span>

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.