Candle Wax

Elemental & Nature · Static · pure CSS

Each letter is coated in solidified, top-lit candle wax — a warm ivory, crimson or charcoal vertical gradient with a soft glossy specular patch and a firm dark contour that stays crisp on any background. A handful of letters carry permanently hardened drips: narrow tapering runs ending in glossy, contact-shadowed bulbs, placed by a deterministic per-letter rule. Nothing melts or animates — a cooled, static ornament, the deliberate opposite of Melt Drip's wet looping ooze.

Open in the generator →All effects

Candle Wax

How it works

Candle Wax is a static elemental & nature text effect rendered entirely in CSS. Each character is wrapped in its own span so it can animate independently — the HTML and JSX exports include that per-letter markup.

Controls

Candle Wax exposes 4 dedicated controls — Wax Tone, Drip Amount, Gloss and Drip Length — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.

CSS

/* Candle Wax — made with TEXT-FX · https://text-fx.app
 * HTML: each character is wrapped in a <span> — see the HTML export.
 * Font: 'Bricolage Grotesque', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.text-effect {
  white-space: pre;
  line-height: 2.38;
}
.text-effect .fx-ch {
  position: relative;
  display: inline-block;
  line-height: 1;
  vertical-align: baseline;
  background: radial-gradient(120% 95% at 32% 10%, rgba(255,255,255,0.49) 0%, rgba(255,255,255,0.21) 24%, rgba(255,255,255,0) 53%),
    linear-gradient(180deg, hsl(352 68% 66%) 0%, hsl(352 72% 46%) 52%, hsl(348 74% 26%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 0.028em hsl(350 85% 26% / 0.7);
  filter: drop-shadow(0 0.02em 0.03em rgba(0,0,0,.35)) drop-shadow(0 0 0.05em hsl(352 68% 20% / 0.3));
}
.text-effect .fx-ch.fx-drip::before,
.text-effect .fx-ch.fx-drip::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  transform-origin: top center;
}
.text-effect .fx-ch.fx-drip::before {
  clip-path: polygon(38% 0%, 62% 0%, 92% 100%, 8% 100%);
  background: linear-gradient(90deg, transparent 22%, rgba(255,255,255,0.2) 46%, transparent 66%),
    linear-gradient(180deg, hsl(352 74% 60%) 0%, hsl(352 76% 46%) 55%, hsl(346 78% 18%) 100%);
}
.text-effect .fx-ch.fx-drip::after {
  border-radius: 50%;
  background: radial-gradient(60% 55% at 30% 26%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(95% 95% at 50% 62%, hsl(352 76% 46%) 0%, hsl(346 78% 18%) 100%);
}
.text-effect .fx-ch.fx-drip.fx-v0::before {
  bottom: -0.197em;
  left: 26%;
  width: 0.184em;
  height: 0.327em;
  transform: translateX(-50%) rotate(-5deg);
}
.text-effect .fx-ch.fx-drip.fx-v0::after {
  bottom: -0.289em;
  left: 26%;
  width: 0.184em;
  height: 0.184em;
  transform: translateX(-50%);
  box-shadow: 0 0.055em 0.074em hsl(342 27.200000000000003% 6% / 0.45);
}
.text-effect .fx-ch.fx-drip.fx-v1::before {
  bottom: -0.228em;
  left: 45%;
  width: 0.191em;
  height: 0.398em;
  transform: translateX(-50%) rotate(-1deg);
}
.text-effect .fx-ch.fx-drip.fx-v1::after {
  bottom: -0.323em;
  left: 45%;
  width: 0.191em;
  height: 0.191em;
  transform: translateX(-50%);
  box-shadow: 0 0.057em 0.076em hsl(342 27.200000000000003% 6% / 0.45);
}
.text-effect .fx-ch.fx-drip.fx-v2::before {
  bottom: -0.257em;
  left: 60%;
  width: 0.199em;
  height: 0.407em;
  transform: translateX(-50%) rotate(2deg);
}
.text-effect .fx-ch.fx-drip.fx-v2::after {
  bottom: -0.357em;
  left: 60%;
  width: 0.199em;
  height: 0.199em;
  transform: translateX(-50%);
  box-shadow: 0 0.06em 0.08em hsl(342 27.200000000000003% 6% / 0.45);
}
.text-effect .fx-ch.fx-drip.fx-v3::before {
  bottom: -0.288em;
  left: 76%;
  width: 0.206em;
  height: 0.478em;
  transform: translateX(-50%) rotate(5deg);
}
.text-effect .fx-ch.fx-drip.fx-v3::after {
  bottom: -0.391em;
  left: 76%;
  width: 0.206em;
  height: 0.206em;
  transform: translateX(-50%);
  box-shadow: 0 0.062em 0.082em hsl(342 27.200000000000003% 6% / 0.45);
}

HTML

This effect needs the markup below (per-letter spans, SVG defs, or a data-text attribute).

<!-- Made with TEXT-FX · https://text-fx.app -->

<style>
.text-effect {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.text-effect {
  white-space: pre;
  line-height: 2.38;
}
.text-effect .fx-ch {
  position: relative;
  display: inline-block;
  line-height: 1;
  vertical-align: baseline;
  background: radial-gradient(120% 95% at 32% 10%, rgba(255,255,255,0.49) 0%, rgba(255,255,255,0.21) 24%, rgba(255,255,255,0) 53%),
    linear-gradient(180deg, hsl(352 68% 66%) 0%, hsl(352 72% 46%) 52%, hsl(348 74% 26%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 0.028em hsl(350 85% 26% / 0.7);
  filter: drop-shadow(0 0.02em 0.03em rgba(0,0,0,.35)) drop-shadow(0 0 0.05em hsl(352 68% 20% / 0.3));
}
.text-effect .fx-ch.fx-drip::before,
.text-effect .fx-ch.fx-drip::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  transform-origin: top center;
}
.text-effect .fx-ch.fx-drip::before {
  clip-path: polygon(38% 0%, 62% 0%, 92% 100%, 8% 100%);
  background: linear-gradient(90deg, transparent 22%, rgba(255,255,255,0.2) 46%, transparent 66%),
    linear-gradient(180deg, hsl(352 74% 60%) 0%, hsl(352 76% 46%) 55%, hsl(346 78% 18%) 100%);
}
.text-effect .fx-ch.fx-drip::after {
  border-radius: 50%;
  background: radial-gradient(60% 55% at 30% 26%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(95% 95% at 50% 62%, hsl(352 76% 46%) 0%, hsl(346 78% 18%) 100%);
}
.text-effect .fx-ch.fx-drip.fx-v0::before {
  bottom: -0.197em;
  left: 26%;
  width: 0.184em;
  height: 0.327em;
  transform: translateX(-50%) rotate(-5deg);
}
.text-effect .fx-ch.fx-drip.fx-v0::after {
  bottom: -0.289em;
  left: 26%;
  width: 0.184em;
  height: 0.184em;
  transform: translateX(-50%);
  box-shadow: 0 0.055em 0.074em hsl(342 27.200000000000003% 6% / 0.45);
}
.text-effect .fx-ch.fx-drip.fx-v1::before {
  bottom: -0.228em;
  left: 45%;
  width: 0.191em;
  height: 0.398em;
  transform: translateX(-50%) rotate(-1deg);
}
.text-effect .fx-ch.fx-drip.fx-v1::after {
  bottom: -0.323em;
  left: 45%;
  width: 0.191em;
  height: 0.191em;
  transform: translateX(-50%);
  box-shadow: 0 0.057em 0.076em hsl(342 27.200000000000003% 6% / 0.45);
}
.text-effect .fx-ch.fx-drip.fx-v2::before {
  bottom: -0.257em;
  left: 60%;
  width: 0.199em;
  height: 0.407em;
  transform: translateX(-50%) rotate(2deg);
}
.text-effect .fx-ch.fx-drip.fx-v2::after {
  bottom: -0.357em;
  left: 60%;
  width: 0.199em;
  height: 0.199em;
  transform: translateX(-50%);
  box-shadow: 0 0.06em 0.08em hsl(342 27.200000000000003% 6% / 0.45);
}
.text-effect .fx-ch.fx-drip.fx-v3::before {
  bottom: -0.288em;
  left: 76%;
  width: 0.206em;
  height: 0.478em;
  transform: translateX(-50%) rotate(5deg);
}
.text-effect .fx-ch.fx-drip.fx-v3::after {
  bottom: -0.391em;
  left: 76%;
  width: 0.206em;
  height: 0.206em;
  transform: translateX(-50%);
  box-shadow: 0 0.062em 0.082em hsl(342 27.200000000000003% 6% / 0.45);
}
</style>

<div class="text-effect"><span class="fx-ch">Y</span><span class="fx-ch">o</span><span class="fx-ch fx-drip fx-v0">u</span><span class="fx-ch">r</span><span class="fx-ch"> </span><span class="fx-ch">t</span><span class="fx-ch">e</span><span class="fx-ch fx-drip fx-v1">x</span><span class="fx-ch">t</span></div>

Category: Elemental & Nature
Type: Static
Browser support: background-clip:text fill + clip-path/radial-gradient drip ornaments (all modern, -webkit- prefixed)
Capabilities: perLetter

How it works

Controls

CSS

HTML

Related Elemental & Nature effects