(… and how that lead me to a very underused CSS feature, resolution media queries.)<\/p>\n\n\n\n
You may have come across this situation: you want to create a disc (oval) shape contained within your element’s boundaries, and you want it to have smooth edges. Not jagged; not blurry.<\/p>\n\n\n\n
If you want to avoid using a pseudo-element or, even worse, children just for decorative purposes, then However, if we do something like this:<\/p>\n\n\n Where Note that we aren’t setting a stop position explicitly for the final stop because the stop position of the final stop defaults to You can see the difference between a pseudo-element disc (smooth edges) and a radial-gradient()<\/code> 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.<\/p>\n\n\n\nThe jaggies problem<\/h2>\n\n\n\n
radial-gradient<\/span>(var<\/span>(--r<\/span>), var<\/span>(--c<\/span>) 100%, #0000<\/span>)<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nr<\/code> is the gradient disc radius, then we get jaggies<\/a>, a step-like effect along the radial-gradient()<\/code> disc, whereas one created with a pseudo-element has smooth-looking edges!<\/p>\n\n\n\n100%<\/code> (of the radial-gradient()<\/code> radius, which is r<\/code> here), which is what we want in this case anyway. If you need a refresher on radial-gradient()<\/code>, check out this detailed explainer<\/a> by Patrick Brosset.<\/p>\n\n\n\nradial-gradient()<\/code> one (jaggies) in this live demo:<\/p>\n\n\n\n