Glow

Work in progress This page is still under development.
Not all resources may be available yet, explanations and examples may be missing and things may change without notice.

Darkmode

To add the glow to something of a given height (or fontsize), here 1em, one needs to calculate four values:

An eighth; here 0.125em
A sixteenth; here 0.0625
A thirtysecond; here 0.03125
A sixtyfourth; here 0.015625

The first three values are used for drop-shadows, the last for an inset shadow. Sadly, the latter is currently not possible using plain CSS filters. Which is why it requires the use of an SVG filter. But support for external SVG filters (using url("filter.svg#filter-id")) is still flaky, we instead opted to have two versions of each glow. One using SVG filters for use-cases which support it (like the logo), and one using CSS filters (as for this page's headings). Below you'll find implementation examples using the primary color CSS variable for the glow color as specified in our (S)CSS stylesheets. Simply replace --color-primary with --color-secondary to use the secondary color.

For CSS filters one can simply use the following set of three shadows layered atop each other:

filter:
  drop-shadow(0 0 0.03125em var(--color-white))
  drop-shadow(0 0 0.0625em var(--color-primary))
  drop-shadow(0 0 0.125em var(--color-primary));

For SVG filters instead use the following two filters:


<filter x="-150%" y="-150%" width="400%" height="400%"
   style="color-interpolation-filters:sRGB;" id="textBlurPrimary">
  <feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="16.25"
     style="flood-color: var(--color-white);" result="drop_shadow_0" />
  <feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="32.5"
     style="flood-color: var(--color-primary);" result="drop_shadow_1" />
  <feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="65"
     style="flood-color: var(--color-primary);" result="drop_shadow_2" />
</filter>

<filter x="-150%" y="-150%" width="400%" height="400%"
   style="color-interpolation-filters:sRGB;" id="textInsetPrimary">
  <feFlood style="flood-color: var(--color-white);" result="flood-white"
     />
  <feFlood style="flood-color: var(--color-primary);"
     result="flood-glow-color" />

  <feComposite in="flood-glow-color" in2="SourceAlpha" operator="in"
     result="flooded" />
  <feGaussianBlur in="SourceAlpha" stdDeviation="8.125"
     result="inset_drop_shadow" />
  <feComposite in="flood-white" in2="inset_drop_shadow" operator="in"
     result="inset_drop_shadow_white" />
  <feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in"
     result="inset_shadow" />
  <feMerge result="final">
    <feMergeNode in="flooded" />
    <feMergeNode in="inset_shadow" />
  </feMerge>
</filter>

We use two separate filters here, because when combining shadows with the primary and the secondary color as can be seen in the logo, it is necessary to first add all drop-shadows to all paths using style="mix-blend-mode: screen;" and then layer all inset-shadow filters ontop of that. Otherwise one path's drop-shadow could layer over another path's inset-shadow. Have a look at the logo's source for an example.

Lightmode

To add the dim glow to something of a given height (or fontsize), here 1em, one needs to calculate one value: a thirtysecond; here 0.03125.

The value is needed for both drop shadows and inset shadows. Sadly, the latter is currently not possible using plain CSS filters. Which is why it requires the use of an SVG filter. But support for external SVG filters (using url("filter.svg#filter-id")) is still flaky, we instead opted to have to versions of each glow. One using SVG filters for use-cases which support it (like the logo), and one using CSS filters (as for this page's headings). Below you'll find implementation examples. They specify tones of the primary color using their respective CSS variable in our stylesheet. You can simply replace each occurence of "primary" with "secondary" and "argon" with "krypton" to get a glow of the secondary color.

For CSS filters one can simply use the following properties:

filter: drop-shadow(0 0 0.03125em var(--color-argon-950));
color: var(--color-argon-800);

For SVG filters instead use the following two filters:


<filter x="-25%" y="-150%" width="150%" height="400%"
   style="color-interpolation-filters:sRGB;" id="textBlurPrimary">
  <feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="16.25"
     style="flood-color: var(--color-argon-950);" result="drop_shadow_0" />
</filter>

<filter x="-25%" y="-150%" width="150%" height="400%"
   style="color-interpolation-filters:sRGB;" id="textInsetPrimary">
  <feFlood style="flood-color: var(--color-primary);" result="flood_brighter"
     />
  <feFlood style="flood-color: var(--color-argon-800);"
     result="flood_darker" />

  <feComposite in="flood_darker" in2="SourceAlpha" operator="in"
     result="flooded" />
  <feGaussianBlur in="SourceAlpha" stdDeviation="8.125"
     result="inset_drop_shadow" />
  <feComposite in="flood_brighter" in2="inset_drop_shadow" operator="in"
     result="inset_drop_shadow_brighter" />
  <feComposite in="inset_drop_shadow_brighter" in2="SourceAlpha" operator="in"
     result="inset_shadow" />
  <feMerge result="final">
    <feMergeNode in="flooded" />
    <feMergeNode in="inset_shadow" />
  </feMerge>
</filter>