I would like to add texts with halo, in the composer (not in the map). Do you know a way to do it?

I'm using QGIS 2.0.1


Add a new label in QGIS 2.0.1 Composer.

In the item properties if you put the following code

<span style="color:blue;text-shadow: 0px 0px 2px #4d2d4d, 0px 5px 10px #aefe00;">Test</span>

you'll obtain the desired effect:

enter image description here

(Don't forget to disable the item background if you are looking for a transparent label!)


Some text-shadow explanations below:

enter image description here

For offsets and blur you can use positive or negative values.

More, you can have multiple shadows, like this:

Example 1:

<span style="color:brown;text-shadow: 0.5px 0.5px 0.5px #fff, 0.7px 0.7px 0px rgba(0,0,0,0.5);">Test</span>

And you'll see this:

enter image description here

Example 2:

<span style="color:violet;text-shadow: -0.5px 0.5px 0px #00e6e6, -1px 1px 0px #01cccc, -1.5px 1.5px 0px #00bdbd;">Test</span>

enter image description here

Example 3:

<span style="color:white;text-shadow:
               0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);">Test</span>

enter image description here

| improve this answer | |
  • 1
    It is the first time I use HTML, you just introduced me to a new world! Exploring your suggestion, I found that code, corresponding exactly to what I was searching for: "text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white". Thanks a lot – cd44 Jan 27 '14 at 12:47
  • I am trying to use a specific font for the label, can you specify how I achieve this? A quick search hasn´t helped so far. Thanks! – Elena Wimmerwuchs Jun 18 at 16:47

Another, easy way to achieve the same as the buffer function in QGIS.DESKTOP is the following:

<p style="-webkit-text-stroke: 3px white">Test</p>

enter image description here

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.