How to add some text effect (like shadow)


I've got a text block with some background image where the text is not easy to read.
So I tried to add some shadows to the text with this type of CSS lines :-1:

color: #616161;
background-color: #bababa;
text-shadow: #e0e0e0 1px 1px 0;

It makes my picture disappear.

Can anyone help ?



  • You haven't showed us enough of your CSS for us to know what it's doing so I would suggest posting two more things.

    1. The actual block of text in your html

    2. The entire CSS selector you're using to try to add the drop shadow to that text.
  • do you mean semi transparent shadow like on my heading texts? menu text and images?
  • Yep, that's what I'm looking for, a shadow effect so that it will be easier to read texts with background images.

    How do you do that @antonsvideo ?

  • @johnboy88 thanks for your reply.

    Here's the code of my block

    </code></pre><section class="mbr-section article mbr-parallax-background" style="background-image: url(file:///C:/Users/Beair/AppData/Local/; padding-top: 120px; padding-bottom: 80px;">
        <div class="mbr-overlay" style="opacity: 0; background-color: rgb(255, 255, 255);">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2 text-xs-center">
                    <div class="lead mbr-editable-full"><p>Voici le texte que je veux avoir sur mon website.<br><br>Ecrit en noir sur un fond clair avec une image de <strong>montagne</strong>.<br><br>Difficile de comprendre pourquoi il m'est imposssible d'ajouter des effets sur les textes sans que l'image en arrière plan disparaisse. C'est tout de meme très étrange.<br><br>Ou est la solution ?</p></div>
    </section><pre class="CodeBlock"><code>

    And I used that generator for the css text effect

  • Well for starters I would change your CSS to this:
    p {
         color: #616161;
         background-color: #bababa;
         text-shadow: #e0e0e0 1px 1px 0;
    So it would only apply to your paragraph tag.
  • Thanks,

    I just tried, and it works but on the whole page, menu included...
  • edited January 2018
    you need to do it in the CSS section of that block, it only requires one line added to existing code for images and 3 lines for text styles such as H1, H2, H3, etc

    if you apply it to P style, it will apply to all text using P, so I would not choose P

    example attached, set size and transparency values to your liking. 0.5 = 50% transparent, 0.1 = 90% transparent
  • Thanks a lot @antonsvideo
    I'm tuning it right now, but that's exactly what I needed !!!
  • Hi - I want to add a shadow effect to some text - WHY isn't it a Mobirise feature SIGH - anyway where can I find the CSS code to adjust please? (By the way - I have not got the code editor).
  • you need the Code Editor extension
  • you need the Code Editor extension

    Thanks :)
Login or Sign Up to comment.