Mjml: Add box-shadow?

[ShaggyDude]

Forgive me if this has been asked but why is there no box-shadow?
I don't like to rely on too many images and can do almost everything with straight css.

I'd love to contribute after I learn my way around the codebase.

Thanks!

[iRyusa]

Hi @ShaggyDude

As said on Slack box-shadow isn't supported by most of clients. If you still want to use it, in 3.3.3 you will be able to add css-class to any MJML element and apply it in mj-style.

[sicaboy]

Any solution?

[kmcb777]

It's still the same situation, you can use a css-class on your element and define the box-shadow in a mj-style

[casank25]

@iRyusa this still doesn't work. adding box-shadow to css-class defined in mj-style produces no results

[iRyusa]

https://mjml.io/try-it-live/r1UfEXtOH It does work fine.

[robkorv]

This works on mjml v4.4.0 and later. It doesn't work on https://mjml.io/try-it-live because that one runs v4.3.0.

<mjml>
    <mj-head>
        <mj-style>
            .box-shadow a, .box-shadow p {
                box-shadow: 0 4px 6px hsla(0,0%,46%,0.2), 0 1px 3px hsla(0,0%,46%,0.2);
            }
        </mj-style>
    </mj-head>
    <mj-body>
        <mj-section>
            <mj-column>
                <mj-button css-class="box-shadow">You can't click me!</mj-button>
            </mj-column>
        </mj-section>
        <mj-section>
            <mj-column>
                <mj-button css-class="box-shadow" href="google.com">Visit google</mj-button>
            </mj-column>
        </mj-section>
    </mj-body>
</mjml>

---

edit after https://github.com/mjmlio/mjml/issues/656#issuecomment-539433847 from @iRyusa

If you change the following it will also work on 4.3.

--- v4.4.0
+++ v4.3.0
@@ -1,5 +1,5 @@
         <mj-style>
-            .box-shadow a, .box-shadow p {
+            .box-shadow td {
                 box-shadow: 0 4px 6px hsla(0,0%,46%,0.2), 0 1px 3px hsla(0,0%,46%,0.2);
             }
         </mj-style>

[iRyusa]

It does work on the try it live too, it's just hidden in the default background color : https://mjml.io/try-it-live/SkDAvRY_S

I think you want to target the td instead of the a/p in your example. In >4.4 a and p control the padding, in 4.3.0 it was the td