How can I reduce the color transition distance in my radial gradient?

Question

I'm trying to get a white circle that should be razor sharp on the inner edge. I think I have managed at least that. I want the black inner surface to contain the content (preferably almost seamlessly and responsive - if possible). And imagine my template had 10-20 more checkboxes.

But now, the white circle on the outer edge should also look quite sharp (not 100% but much sharper than in my example). So a minimal transition should remain visible on the outer edge (but not on the inner edge). I'll have to experiment with the thickness of the white circle when I get the CSS right, but I don't want the white circle to be too thick.

But I can't manage that somehow...

Which CSS values do I have to specify so that the white circle is sharper on its outer edge and that the black inner surface encloses the content?

Thanks for any effort in advance. :)

body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-image: radial-gradient(circle, black 54%, white 50%, white 10%, black, black);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

html {
  scroll-behavior: smooth;
}

h1 {
  font-size: 30px;
  color: white;
  text-align: center;
  margin: 40px 0 20px 0;
}

input {
  position: absolute;
  left: -100vw;
}

label {
  display: block;
  padding: 8px 22px;
  margin: 0 0 1px 0;
  cursor: pointer;
  background: #181818;
  border: 1px solid white;
  border-radius: 5px;
  color: #FFF;
  position: relative;
}

label:hover {
  background: white;
  border: 1px solid white;
  color: black;
}

label::after {
  content: '+';
  font-size: 22px;
  font-weight: bold;
  position: absolute;
  right: 10px;
  top: 2px;
}

input:checked+label::after {
  content: '-';
  right: 14px;
  top: 3px;
}

.content {
  background: #DBEECD;
  background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
  background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
  background: linear-gradient(to top left, #DBEECD, #EBD1CD);
  padding: 10px 25px 10px 25px;
  border: 1px solid #A7A7A7;
  margin: 0 0 1px 0;
  border-radius: 1px;
}

input+label+.content {
  display: none;
}

input:checked+label+.content {
  display: block;
}

<body>
  <h1>My Testwebsite</h1>

  <input type="checkbox" id="title1" name="contentbox" />
  <label for="title1">Content 1</label>

  <div class="content">
    My Content 1
  </div>

  <input type="checkbox" id="title2" name="contentbox" />
  <label for="title2">Content 2</label>

  <div class="content">
    My Content 2
  </div>

  <input type="checkbox" id="title3" name="contentbox" />
  <label for="title3">Content 3</label>

  <div class="content">
    My Content 3
  </div>
</body>

isherwood · Accepted Answer · 2022-06-16T14:42:38.413

Your gradient rules were a bit odd as you went down to 10% from 55%. Really they should be progressively larger. I adjusted to transition from white to black over 2%. Keep fiddling with the values to get it just right.

Have a look at the MDN docs to understand better.

body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-image: radial-gradient(circle, 
    black 54%, 
    white 55%, 
    white 70%, 
    black 72%, 
    black
  );
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

html {
  scroll-behavior: smooth;
}

h1 {
  font-size: 30px;
  color: white;
  text-align: center;
  margin: 40px 0 20px 0;
}

input {
  position: absolute;
  left: -100vw;
}

label {
  display: block;
  padding: 8px 22px;
  margin: 0 0 1px 0;
  cursor: pointer;
  background: #181818;
  border: 1px solid white;
  border-radius: 5px;
  color: #FFF;
  position: relative;
}

label:hover {
  background: white;
  border: 1px solid white;
  color: black;
}

label::after {
  content: '+';
  font-size: 22px;
  font-weight: bold;
  position: absolute;
  right: 10px;
  top: 2px;
}

input:checked+label::after {
  content: '-';
  right: 14px;
  top: 3px;
}

.content {
  background: #DBEECD;
  background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
  background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
  background: linear-gradient(to top left, #DBEECD, #EBD1CD);
  padding: 10px 25px 10px 25px;
  border: 1px solid #A7A7A7;
  margin: 0 0 1px 0;
  border-radius: 1px;
}

input+label+.content {
  display: none;
}

input:checked+label+.content {
  display: block;
}

<body>
  <h1>My Testwebsite</h1>

  <input type="checkbox" id="title1" name="contentbox" />
  <label for="title1">Content 1</label>

  <div class="content">
    My Content 1
  </div>

  <input type="checkbox" id="title2" name="contentbox" />
  <label for="title2">Content 2</label>

  <div class="content">
    My Content 2
  </div>

  <input type="checkbox" id="title3" name="contentbox" />
  <label for="title3">Content 3</label>

  <div class="content">
    My Content 3
  </div>

  <div class="content">
    My Content 9
  </div>

</body>

Rene van der Lende · Answer 2 · 2022-06-16T15:07:57.947

To get some kind of anti-aliassing between bands in a gradient circle, you can use double units/percentages with the slightest of variations in values.

As circles don't have straight lines you will get jagged edges when repeating end values as start values on a next colors. Therefore you need to 'fool' the browser graphics routines a bit and force some rounding differences by slight differences in the from/to distance values of no more that 0.5% or 1px, or whatever unit you use.

Like:

   color 1: 10%
   color 2: 10.5% 20%
   color 3: 20.5% 30%
   etc...

I copied your snippet and used green for white and red for black to show the anti-aliassing at work:

body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;

  background-image: radial-gradient( circle,
                                     black 54%,
                                     white 54.5% 55%,
                                     green 55.5% 65%,
                                     black 65.5%,
                                     red );

  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

html {
  scroll-behavior: smooth;
}

h1 {
  font-size: 30px;
  color: white;
  text-align: center;
  margin: 40px 0 20px 0;
}

input {
  position: absolute;
  left: -100vw;
}

label {
  display: block;
  padding: 8px 22px;
  margin: 0 0 1px 0;
  cursor: pointer;
  background: #181818;
  border: 1px solid white;
  border-radius: 5px;
  color: #FFF;
  position: relative;
}

label:hover {
  background: white;
  border: 1px solid white;
  color: black;
}

label::after {
  content: '+';
  font-size: 22px;
  font-weight: bold;
  position: absolute;
  right: 10px;
  top: 2px;
}

input:checked+label::after {
  content: '-';
  right: 14px;
  top: 3px;
}

.content {
  background: #DBEECD;
  background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
  background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
  background: linear-gradient(to top left, #DBEECD, #EBD1CD);
  padding: 10px 25px 10px 25px;
  border: 1px solid #A7A7A7;
  margin: 0 0 1px 0;
  border-radius: 1px;
}

input+label+.content {
  display: none;
}

input:checked+label+.content {
  display: block;
}

  <h1>My Testwebsite</h1>

  <input type="checkbox" id="title1" name="contentbox" />
  <label for="title1">Content 1</label>

  <div class="content">
    My Content 1
  </div>

  <input type="checkbox" id="title2" name="contentbox" />
  <label for="title2">Content 2</label>

  <div class="content">
    My Content 2
  </div>

  <input type="checkbox" id="title3" name="contentbox" />
  <label for="title3">Content 3</label>

  <div class="content">
    My Content 3
  </div>

How can I reduce the color transition distance in my radial gradient?

2 Answers2