How to correctly position a radial gradient background?

Question

I have small problem with css position with this code.

Unfortunately I need this circle to be on the right side of the page (div) and not in the middle. Thanks for the answers

body{
 margin:0;
 padding:0;
 }
 
 .session-box{
 background:#333;
 width:100%;
 min-height:100vh;
 }
 
 .circle{
 position: absolute;
  top: 0;
  left 0;    
  width: 100%;
  height: 100%;
 background: -moz-radial-gradient(transparent 200px, rgba(255,255,255,0.6) 200px);
  background: -webkit-radial-gradient(transparent 100px , rgba(255,255,255,0.6) 200px ) ;
  background: -ms-radial-gradient(transparent 100px, rgba(255,255,255,0.6) 200px);
  background: -o-radial-gradient(transparent 100px, rgba(255,255,255,0.6) 200px);
  }

<div class="session-box">
  <div class="circle"></div>
</div>

i need this

What you need is [gradient-position](https://www.quirksmode.org/css/images/position.html), [docs here](https://www.quirksmode.org/css/images/position.html). — skobaljic, May 27 '19 at 10:31

score 2 · Answer 1 · edited May 27 '19 at 11:08

insert circle at calc(100% - 200px) as first parameter

See: https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient or
https://css-tricks.com/snippets/css/css-radial-gradient/

body{
 margin:0;
 padding:0;
 }
 
 .session-box{
 background:#333;
 width:100%;
 min-height:100vh;
 }
 
 .circle{
 position: absolute;
  top: 0;
  left 0;    
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at calc(100% - 200px), transparent 100px, rgba(255,255,255,0.6) 200px);
  }

<div class="session-box">
  <div class="circle"></div>
</div>

score 1 · Answer 2 · edited Sep 01 '22 at 16:53

Here is another syntax in case you want better support than the at one (Safari doesn't currently support the at syntax for background). The gradient will by default be placed at the center so we increase the size of the background to move the center position to the right.

body {
  margin: 0;
  padding: 0;
}

.session-box {
  background: #333;
  width: 100%;
  min-height: 100vh;
}

.circle {
  position: absolute;
  top: 0;
  left 0;
  width: 100%;
  height: 100%;
  /* Circle with 100px Radius*/
  background-image: radial-gradient(circle 100px, transparent 50%, rgba(255, 255, 255, 0.6) 100%);
  /* Twice bigger than the container minus 2xRadius */
  background-size: calc(200% - 200px) 100%;
}

<div class="session-box">
  <div class="circle">
  </div>
</div>

You can also do it without calc():

body {
  margin: 0;
  padding: 0;
}

.session-box {
  background: #333;
  width: 100%;
  min-height: 100vh;
}

.circle {
  position: absolute;
  top: 0;
  left 0;
  width: 100%;
  height: 100%;
  padding-right:100px; /*Equal to radius*/
  /* Circle with 100px Radius*/
  background-image: radial-gradient(circle 100px, transparent 50%, rgba(255, 255, 255, 0.6) 100%);
  /* Twice bigger than the container */
  background-size: 200% 100%;
  background-origin:content-box; /* We don't consider the padding when doing the calculation */
  box-sizing:border-box;
}

<div class="session-box">
  <div class="circle">
  </div>
</div>

How to correctly position a radial gradient background?

2 Answers2