Glow

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 (further information: see Notes).

Below you'll find implementation examples using the primary color CSS variable for the glow color as specified in our (S)CSS stylesheets. In the CSS example simply replace --color-primary with --color-secondary to use the secondary color. In the SVG example, we don't use CSS variables, because not every software understands them.

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:


<!-- this code assumes a font-size of 520 -->

<filter x="-150%" y="-150%" width="400%" height="400%"
   color-interpolation-filters="sRGB" id="textBlurPrimary" >
  <feGaussianBlur in="SourceGraphic" stdDeviation="16.25" />
  <feOffset dx="0" dy="0" result="offsetblur" />
  <feFlood flood-color="#ffffff" flood-opacity="1" /> <!-- color-white -->
  <feComposite in2="offsetblur" operator="in" />
  <feMerge result="drop_shadow_0" >
    <feMergeNode/>
    <feMergeNode in="SourceGraphic" />
  </feMerge>

  <feGaussianBlur in="drop_shadow_0" stdDeviation="32.5" />
  <feOffset dx="0" dy="0" result="offsetblur" />
  <feFlood flood-color="#c6257d" flood-opacity="1" /> <!-- color-primary -->
  <feComposite in2="offsetblur" operator="in" />
  <feMerge result="drop_shadow_1" >
    <feMergeNode/>
    <feMergeNode in="drop_shadow_0" />
  </feMerge>

  <feGaussianBlur in="drop_shadow_1" stdDeviation="65" />
  <feOffset dx="0" dy="0" result="offsetblur" />
  <feFlood flood-color="#c6257d" flood-opacity="1" /> <!-- color-primary -->
  <feComposite in2="offsetblur" operator="in" />
  <feMerge result="drop_shadow_2" >
    <feMergeNode/>
    <feMergeNode in="drop_shadow_1" />
  </feMerge>
</filter>

<filter x="-150%" y="-150%" width="400%" height="400%"
   color-interpolation-filters="sRGB" id="textInsetPrimary" >
  <feFlood flood-color="#ffffff" result="flood-white" /> <!-- color-white -->
  <feFlood flood-color="#c6257d" result="flood-glow-color" /> <!-- color-primary -->

  <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>

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 (further information: see Notes).

Below you'll find implementation examples using the primary color CSS variable for the glow color as specified in our (S)CSS stylesheets. In the CSS example simply replace each occurrence of "primary" with "secondary" and "argon" with "krypton" to get a glow of the secondary color. In the SVG example, we don't use CSS variables, because not every software understands them.

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:


<!-- this code assumes a font-size of 520 -->

<filter x="-25%" y="-150%" width="150%" height="400%"
   color-interpolation-filters="sRGB" id="textBlurPrimary" >
  <feGaussianBlur in="SourceGraphic" stdDeviation="16.25" />
  <feOffset dx="0" dy="0" result="offsetblur" />
  <feFlood flood-color="#3f012d" flood-opacity="1" /> <!-- color-argon-950 -->
  <feComposite in2="offsetblur" operator="in" />
  <feMerge result="drop_shadow_0" >
    <feMergeNode/>
    <feMergeNode in="SourceGraphic" />
  </feMerge>
</filter>

<filter x="-25%" y="-150%" width="150%" height="400%"
   color-interpolation-filters="sRGB" id="textInsetPrimary" >
  <feFlood flood-color="#c6257d" result="flood_brighter" /> <!-- color-primary -->
  <feFlood flood-color="#3f012d" result="flood_darker" /> <!-- color-argon-950 -->

  <feComposite in="flood_darker" in2="SourceAlpha" operator="in"
     result="flooded" />
  <feComponentTransfer in="SourceAlpha" result="reduced_alpha" >
    <feFuncA type="table" tableValues="0 0.5" />
  </feComponentTransfer>
  <feGaussianBlur in="reduced_alpha" stdDeviation="16.25"
     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>

Notes

Because 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).

In the SVG files we use two separate filters, 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 put them in an isolated group, so that the blend mode does not interfere with the background:
<g style="isolation: isolate;">
Then layer all inset-shadow filters on top of that - otherwise, one path's drop shadow might overlay another path's inset-shadow. Have a look at the logo's source for an example.

Since inkscape, for example, cannot handle the ‘feDropShadow’ filter yet, we use it in its long form as a combination of 5 other filters, as described in the SVG Filter Effects Module Level 1 (Working Draft).