Font Styles

There are three font styles in Elementor:

  1. Text Stroke – outlines each letter with the same or another color
  2. Text Shadow – makes a shadow of the text with the ability to control the shadow position, color, and blur
  3. Text Blend Mode – affects how the text interacts with the background
    • For the example, all of the text started as red on a teal background

Text Stroke Font Style Example

Text Shadow Font Style Example

Normal Blend Mode

The final color is the top color, regardless of what the bottom color is. The effect is like two opaque pieces of paper overlapping.

Overlay Blend Mode

The final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter.

Color Dodge Blend Mode

The final color is the result of dividing the bottom color by the inverse of the top color. A black foreground leads to no change. A foreground with the inverse color of the backdrop leads to a fully lit color. This blend mode is similar to screen, but the foreground need only be as light as the inverse of the backdrop to create a fully lit color.

Difference Blend Mode

The final color is the result of subtracting the darker of the two colors from the lighter one. A black layer has no effect, while a white layer inverts the other layer’s color.

Multiply Blend Mode

The final color is the result of multiplying the top and bottom colors. A black layer leads to a black final layer, and a white layer leads to no change. The effect is like two images printed on transparent film overlapping.

Darken Blend Mode

The final color is composed of the darkest values of each color channel.

Saturation Blend Mode

The final color has the saturation of the top color, while using the hue and luminosity of the bottom color. A pure gray backdrop, having no saturation, will have no effect.

Exclusion Blend Mode

The final color is similar to difference, but with less contrast. As with difference, a black layer has no effect, while a white layer inverts the other layer’s color.

Luminosity Blend Mode

The final color has the luminosity of the top color, while using the hue and saturation of the bottom color. This blend mode is equivalent to color, but with the layers swapped.

Screen Blend Mode

The final color is the result of inverting the colors, multiplying them, and inverting that value. A black layer leads to no change, and a white layer leads to a white final layer. The effect is like two images shone onto a projection screen.

Lighten Blend Mode

The final color is composed of the lightest values of each color channel.

Color Blend Mode

The final color has the hue and saturation of the top color, while using the luminosity of the bottom color. The effect preserves gray levels and can be used to colorize the foreground.

Hue Blend Mode

The final color has the hue of the top color, while using the saturation and luminosity of the bottom color.