Search code examples
csstexthtml-emailshadowmjml

Text shadow in mjml for email html

Is it possible to create a text shadow in mjml? I would like the shadow to work with as many email clients as possible.

Solution

  • mj-text takes plain HTML so you can add a text-shadow like you would in plain HTML (see live here).

    <mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text font-size="20px" font-family="helvetica">
          <p style="text-shadow: 1px 1px #ff0000;">Hello world</p>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

    Like highlighted in another answer, note that text-shadow is not well supported across email clients.