Radial-gradient() can create decorative discs without pseudo-elements, but direct radial gradients often produce jagged, step-like edges. Pseudo-elements show smooth edges due to anti-aliasing. Many attempts to fix gradient discs use a 1% gap between color-stop positions, but that introduces blurry edges for large discs while still producing jaggies for small discs. The radial-gradient() final stop defaults to 100% of the gradient radius, so explicitly setting it is unnecessary. Introducing a 1px distance between the two stops provides consistently smooth edges across disc sizes, avoiding both blurriness and jagged artifacts.
If you want to avoid using a pseudo-element or, even worse, children just for decorative purposes, then radial-gradient() seems to be the best solution. Especially in the case where you might need a bunch of such discs, more than the two pseudos available on an element. However, if we do something like this: Where r is the gradient disc radius, then we get jaggies, a step-like effect along the radial-gradient() disc, whereas one created with a pseudo-element has smooth-looking edges!
A solution I often see used to try to fix radial-gradient() discs is introducing a 1% distance between the positions of the two stops, something like this. As I mentioned before, unless another value is explicitly specified, the final stop position defaults to 100%, so there's never any need to explicitly set it to that value since it's the default. However, a 1% distance means blurry edges for big discs... ... while we still get jaggies for small discs!
Collection
[
|
...
]