How can I add a shadow to text in Dawn using CSS?

[TheRitualThief]

Hi folks!

I’m trying to add a shadow to the heading in the banner image on the home section with css.(see attached)

I’m editing the published theme (Dawn) and tried these instructions but it’s not making any difference when I add them to the code or the CSS editor (not sure if there’s a bug or if the code is off.) Can you please advise (step-by-step + exact code) how should I tackle this?

[NomtechSolution]

1. In the theme editor, locate the section that contains the banner image and heading on the home section. This might be a “Sections” or “Homepage” section depending on your theme.
2. Look for the code that generates the heading element. It will typically be surrounded by HTML tags like <h1>, <h2>, or <h3>.
3. Add the following CSS code to the theme’s CSS editor:

/* Add shadow to the heading */
.your-heading-class {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
​

Replace .your-heading-class with the appropriate class name or CSS selector for the heading element you want to apply the shadow effect to. If there is no specific class name, you can use the appropriate HTML tag instead.

[TheRitualThief]

Hey there,

Thanks for the post. The theme is Dawn (it’s mentioned in my original post). I already tried what you suggested (it’s mentioned in the community thread I linked). It’s not working. Thanks!

[Ujjaval]

@TheRitualThief Can you provide store url?

[Ohed-Ali]

sometime due to background image, text changes won’t effect, kindly share your store preview url, will check and update you.

[TheRitualThief]

Hi Ohed, what does it depend on?

https://veganproteinpowder.myshopify.com/admin/themes/133460394133/editor?section=template–16181568700565__image_banner&context=theme&category=gid%3A%2F%2Fshopify%2FOnlineStoreThemeSettingsCategory%2FContent%2Bcontainers%3Ftheme_id%3D133460394133%26first_setting_id%3Dtext_boxes_border_thickness

pass: veefru

[Ujjaval]

@TheRitualThief add below css into base.css file

h2.banner__heading.inline-richtext.h0 {
    text-shadow: -4px -8px 2px rgba(0, 0, 0, 1);
}

[TheRitualThief]

Thanks a million!

I did

h2.banner__heading.inline-richtext.h0 {
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
}

and it worked beautifully. Thanks again!