iPhone UILabel text soft shadow

Question

I know soft shadows are not supported by the UILabel out of the box, on the iPhone. So what would be the best way to implement my own one?

EDIT:

Obviously I will subclass the UILabel and draw in the -drawRect: My question is, how do I get the contents of the label as graphics and draw around them, blur them etc...

EDIT 2:

I returned to this question about a year later. In the meantime I've built a class that allows you to easily add soft shadow to a label and tweak it's radius etc and also to draw gradients on the text itself. You can find it on GitHub: https://github.com/doukasd/iOS-Components/tree/master/Views

how to implement this is Base SDK4.0 ? – Nik's May 04 '12 at 14:22 — Nik's, May 04 '12 at 14:22

score 191 · Answer 1 · edited Oct 08 '20 at 22:36

191

As of 3.2 there is direct support for shadows in the SDK.

label.layer.shadowColor = [label.textColor CGColor];
label.layer.shadowOffset = CGSizeMake(0.0, 0.0);

#import <QuartzCore/QuartzCore.h> and play with some parameters:

label.layer.shadowRadius = 3.0;
label.layer.shadowOpacity = 0.5;

And, if you find your shadow clipped by the label bounds:

label.layer.masksToBounds = NO;

finally set

label.layer.shouldRasterize = YES;

edited Oct 08 '20 at 22:36

Chase Roberts

9,082
13
73
131

answered Jan 20 '11 at 14:29

IlDan

6,851
3
33
34

12

Note that to use shadowRadius you have to include the QuartzCore headers: `#import ` – blackjack75 Jun 09 '11 at 19:37
5

For some reason this has no effect on my UILabel – Pascalius Sep 03 '12 at 11:58
4

+ 1 for the maskToBounds extra info. – eladleb Nov 10 '12 at 22:09
2

maskToBounds is by default NO, and please edit your example because shadowRadius = 20 is VERY high, so might seen not working (like my case and maybe also for @Pascalius). even 3 (the default) is a bit too much for small labels. – shem Dec 11 '12 at 08:29
ty, updating w/ your suggestions – IlDan Dec 11 '12 at 14:42
The shadow is so soft that is sometimes difficult to notice :( – cprcrack Sep 02 '13 at 20:36
1

Also - I have found that you need to set the background color of the label to clearColor, or you will not see the shadow. – Shaun Budhram Sep 03 '13 at 08:37
May want to add that you can do the same with the User Defined Runtime Attributes in IB. – Shalmezad Jun 09 '15 at 13:32
1

What will happen if you set `shouldRasterize` to false? – Blip Jul 20 '15 at 16:33
1

If you plan on using `shouldRasterize`, then make sure you also set the `rasterizationScale` : `label.layer.rasterizationScale = [UIScreen mainScreen].scale;` Or it may look weird on retina screens. – Eeshwar Oct 27 '16 at 09:22

score 38 · Answer 2 · edited Aug 15 '12 at 13:43

38

I advise you to use the shadowColor and shadowOffset properties of UILabel:

UILabel* label = [[UILabel alloc] init];
label.shadowColor = [UIColor whiteColor];
label.shadowOffset = CGSizeMake(0,1);

edited Aug 15 '12 at 13:43

answered Mar 02 '10 at 13:15

Sunki Min

920
9
16

Thank you but yes. I was actually looking for *soft* shadow. – Dimitris Mar 02 '10 at 18:37
For "soft" shadow - maybe you can change color properly? for example, i needed "soft" dark shadow. - as blackColor was too sharp, i ended up with grayColor :) Happy coding! :) – Guntis Treulands May 16 '12 at 14:52
4

He means a blurry shadow, without sharp edges. – Nick Lockwood Jul 01 '12 at 00:34

score 19 · Accepted Answer · edited May 23 '17 at 12:26

19

This answer to this similar question provides code for drawing a blurred shadow behind a UILabel. The author uses CGContextSetShadow() to generate the shadow for the drawn text.

edited May 23 '17 at 12:26

Community

1
1

answered Nov 10 '09 at 18:19

Brad Larson

170,088
45
397
571

That's great and it works as advertised! Thanks. But do you have an idea how I can make that shadow more intense? Since it part of the context, I can't draw it more than once, which would do the trick. – Dimitris Nov 10 '09 at 19:02
1

You could change the color to be black with a 100% opacity (in his example, it's only 80%), as well as change the shadow radius within the CGContextSetShadow() call. You might also try shifting the offset from the 4,-4 position that he's set. – Brad Larson Nov 10 '09 at 19:06
Yes I have tried 100% opacity etc. And regarding the size, the larger you set it to be, the less visible the shadow is... I am looking for something similar to the Shadow Effect in Flash, which you can set to more than 100%. – Dimitris Nov 10 '09 at 19:12
how to implement this is Base SDK4.0 ? – Nik's May 04 '12 at 14:22
@Apple - What's wrong with the code there? Everything in the linked answer still works today on current iOS versions. – Brad Larson May 04 '12 at 15:36
it is not working properly in IOS 4.0 color gradient is show error because its shows there is 0 object in color array but same code is working properly in IOS above 4.3 – Nik's May 08 '12 at 05:23

score 17 · Answer 4 · answered Mar 20 '13 at 16:31

17

Additionally to IIDan's answer: For some purposes it is necessary to set

label.layer.shouldRasterize = YES

I think this is due to the blend mode that is used to render the shadow. For example I had a dark background and white text on it and wanted to "highlight" the text using a black shadowy glow. It wasn't working until I set this property.

answered Mar 20 '13 at 16:31

Stefan

661
6
5

This is required to make it faster even with dozens of UILabels in view. Without it, shadows are slow if used with opacity. – Jeet Mar 21 '14 at 12:08
If you plan on using `shouldRasterize`, then make sure you also set the `rasterizationScale` : `label.layer.rasterizationScale = [UIScreen mainScreen].scale;` Or it may look weird on retina screens. – Eeshwar Oct 27 '16 at 09:25

Yang Meyer · Answer 5 · 2010-05-25T09:53:25.577

7

Apply the (soft) shadow on the view's layer, like this:

UILabel *label = [[UIabel alloc] init];
label.layer.shadowColor = [[UIColor whiteColor] CGColor];
label.layer.shadowOpacity = 1.0;

edited May 25 '10 at 09:53

answered May 19 '10 at 09:45

Yang Meyer

5,409
5
39
51

score 7 · Answer 6 · answered Aug 19 '15 at 11:14

7

To keep things up to date: Creating the shadow in Swift is as easy as that:

Import the QuartzCore Framework

import QuartzCore

And set the shadow attributes to your label

titleLabel.shadowColor = UIColor.blackColor()
titleLabel.shadowOffset = CGSizeMake(0.0, 0.0)
titleLabel.layer.shadowRadius = 5.0
titleLabel.layer.shadowOpacity = 0.8
titleLabel.layer.masksToBounds = false
titleLabel.layer.shouldRasterize = true

answered Aug 19 '15 at 11:14

Sebastian Hojas

4,158
2
27
38

Weirdly, that results in a shadow above (in the y direction) the text instead of aligned with it. – Victor Engel Aug 11 '21 at 17:09

score 5 · Answer 7 · edited Sep 21 '17 at 19:43

_nameLabel = [[UILabel alloc] initWithFrame:CGRectZero];
_nameLabel.font = [UIFont boldSystemFontOfSize:19.0f];
_nameLabel.textColor = [UIColor whiteColor];
_nameLabel.backgroundColor = [UIColor clearColor];
_nameLabel.shadowColor = [UIColor colorWithWhite:0 alpha:0.2];
_nameLabel.shadowOffset = CGSizeMake(0, 1);

i think you should use the [UIColor colorWithWhite:0 alpha:0.2] to set the alpha value.

Sean · Answer 8 · 2014-01-23T19:46:03.377

4

I tried almost all of these techniques (except FXLabel) and couldn't get any of them to work with iOS 7. I did eventually find THLabel which is working perfectly for me. I used THLabel in Interface Builder and setup User Defined Runtime Attributes so that it's easy for a non programmer to control the look and feel.

https://github.com/MuscleRumble/THLabel

edited Jan 23 '14 at 19:46

answered Nov 22 '13 at 16:03

Sean

41
3

score 4 · Answer 9 · answered Jan 09 '15 at 07:39

This like a trick,

UILabel *customLabel = [[UILabel alloc] init];

UIColor *color = [UIColor blueColor];
customLabel.layer.shadowColor = [color CGColor];
customLabel.layer.shadowRadius = 5.0f;
customLabel.layer.shadowOpacity = 1;
customLabel.layer.shadowOffset = CGSizeZero;
customLabel.layer.masksToBounds = NO;

score 3 · Answer 10 · answered Jun 07 '12 at 09:20

3

I wrote a library that provides a UILabel subclass with soft shadow support and a bunch of other effects:

https://github.com/nicklockwood/FXLabel

answered Jun 07 '12 at 09:20

Nick Lockwood

40,865
11
112
103

score 3 · Answer 11 · edited Mar 25 '17 at 18:26

Subclass UILabel, as stated, then, in drawRect:, do [self drawTextInRect:rect]; to get the text drawn into the current context. Once it is in there, you can start working with it by adding filters and whatnot. If you want to make a drop shadow with what you just drew into the context, you should be able to use:

CGContextSetShadowWithColor()

Look that function up in the docs to learn how to use it.

score 3 · Answer 12 · answered Jan 05 '17 at 08:00

In Swift 3, you can create an extension:

import UIKit

extension UILabel {
    func shadow() {
        self.layer.shadowColor = self.textColor.cgColor
        self.layer.shadowOffset = CGSize.zero
        self.layer.shadowRadius = 3.0
        self.layer.shadowOpacity = 0.5
        self.layer.masksToBounds = false
        self.layer.shouldRasterize = true
    }
}

and use it via:

label.shadow()

score 1 · Answer 13 · answered Oct 05 '11 at 22:43

1

As of iOS 5 Apple provides a private api method to create labels with soft shadows. The labels are very fast: I'm using dozens at the same time in a series of transparent views and there is no slowdown in scrolling animation.

This is only useful for non-App Store apps (obviously) and you need the header file.

$SBBulletinBlurredShadowLabel = NSClassFromString("SBBulletinBlurredShadowLabel");

CGRect frame = CGRectZero;

SBBulletinBlurredShadowLabel *label = [[[$SBBulletinBlurredShadowLabel alloc] initWithFrame:frame] autorelease];
label.backgroundColor = [UIColor clearColor];
label.textColor = [UIColor whiteColor];
label.font = [UIFont boldSystemFontOfSize:12];
label.text = @"I am a label with a soft shadow!";
[label sizeToFit];

answered Oct 05 '11 at 22:43

Sticktron

82
4

3

You don't want to use this if your app is going to the app store. – Charles Vu Nov 02 '11 at 11:41
4

Well, to be fair, he stated that in the answer. – pablasso May 01 '12 at 22:34
Why wouldn't you want to use this with a potential App Store submission ?? – jesses.co.tt Aug 30 '13 at 03:56

score 0 · Answer 14 · answered Jun 16 '20 at 20:52

While it's impossible to set a blur radius directly on UILabel, you definitely could change it by manipulating CALayer.

Just set:

//Required properties
customLabel.layer.shadowRadius = 5.0 //set shadow radius to your desired value.
customLabel.layer.shadowOpacity = 1.0 //Choose an opacity. Make sure it's visible (default is 0.0)

//Other options
customLabel.layer.shadowOffset = CGSize(width: 10, height: 10)
customLabel.layer.shadowColor = UIColor.black.cgColor
customLabel.layer.masksToBounds = false

What I hope will help someone and other answers failed to clarify is that it will not work if you also set UILabel Shadow Color property directly on Interface Builder while trying to setup .layer.shadowRadius.

So if setting label.layer.shadowRadius didn't work, please verify Shadow Color for this UILabel on Interface Builder. It should be set to default. And then, please, if you want a shadow color other than black, set this color also through .layer property.

enter image description here

score -3 · Answer 15 · answered Nov 10 '09 at 16:15

-3

Subclass UILabel, and override -drawInRect:

answered Nov 10 '09 at 16:15

NSResponder

16,861
7
32
46

20

Okay that's the obvious part. Then what? – Dimitris Nov 10 '09 at 16:35

iPhone UILabel text soft shadow

15 Answers15

Linked