Category Image 052
Posted on by Chris Coyier

Chris’ Corner: Gradients, Generators, and Glows

Radial gradients do represent a bit of a leap up in complexity compared to linear gradients in CSS. With linear gradients, you sorta pick a direction and plop some stops on there. The default direction, to bottom, you don’t even have to include if that’s the direction you want, and two color stops with no additional values just mean “all the way at the top to all the way at the bottom”. Something like this linear-gradient(darkblue, blue).

Good news: radial gradients do maintain making most parameters optional, so radial-gradient(darkblue, blue) is still functional and half-decently-useful. But the complexity goes up from there.

  • Radial gradients need to be told to behave like a circle if that’s the shape you want, not the default ellipse.
  • You can tell a radial gradient where to stop, before you even get to the color stops.
  • You can choose a starting position for the radial gradient, it doesn’t have to be dead center.
  • There are keywords that tell radial gradients to extend to certain relevant points of the container, like closest-side and furthest-corner and such.

It was enough for Patrick Brosset to ask Do you really understand CSS radial-gradients?, which, ya know, fair.

human eyes drawn with css radial gradients.

There is no built-in way to generate a random number in CSS. Maybe there should be, as there are countless demos that use some other technology to feed random numbers into CSS. The use case is often generative art or decorative effects, but there is so much of that and the results can be so cool, it’s almost shame we don’t have it. So what do we do to get random numbers in CSS?

  • We use the random function in a CSS processor (e.g. random() works in Sass) — but then it’s only random at build time.
  • We use a random number created in JavaScript, then set a --custom-property with it. Maybe even Houdini.
  • We use user input somehow to make a value feel random.

Kacper Kula’s Randomness in CSS kinda gets into all three of those. He uses a hand-built random number generator in Sass based on prime numbers. The @property syntax is used to ensure a custom property is an integer and is sometimes used as a seed that comes in via JavaScript.

Demo Pen

Let me leave you this week with just a tiny classy snippet of CSS from CodyHouse:

.component {
  /* inner glow 👇 */
  box-shadow: 
    inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),

  /* shadow ring 👇 */
    0 0 0 1px hsla(0, 0%, 0%, 0.05),

  /* multiple soft shadows 👇 */
    0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
    0 0.9px 1.5px hsla(0, 0%, 0%, 0.045),
    0 3.5px 6px hsla(0, 0%, 0%, 0.09);
}
Demo Pen

That’s just a nice look right there.