Hi,
I would like to make my H2 a transparent text with white borders, can anyone help me :)?
Here you can see how it is now and how i want it to be.
https://bentobay.de/
Password:
bawvay
Thank you very much in advance!!
Topic summary
A user seeks to transform their H2 heading text to be transparent with white borders on their Shopify store. They provided before/after images and a password-protected site link showing the desired effect.
Two solutions were offered:
-
CSS via theme files: Navigate to Shopify Admin → Online Store → Theme → Edit code, then locate base.css, theme.css, styles.css, or theme.scss.liquid. Insert CSS targeting the specific banner heading class with
color: transparentand-webkit-text-stroke: 1px white. -
CSS via theme.liquid: Access the theme’s Edit Code option, find theme.liquid, and paste CSS below the
<head>tag. This targets the specific banner element ID with the same transparent color and white stroke properties, plus removes text-shadow.
Both approaches use -webkit-text-stroke to create the white outline effect while making the fill transparent. The second solution includes removing a highlighted portion if universal application is desired.
Hi @Daniel19901 ,
You can try this code by following these steps:
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid
Step 3: Insert the below code at the bottom of the file → Save
h2.banner__heading.inline-richtext.h1 {
color: transparent !important;
-webkit-text-stroke: 1px white !important;
position: relative !important;
}
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 
1 Like
Hey @Daniel19901 ,
Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.
#Banner-template--21197290144073__image_banner_D9cdc8 h2.banner__heading.inline-richtext.h1 {
color: transparent !important;
-webkit-text-stroke: 1px white !important;
text-stroke: 1px white !important;
text-shadow: none !important;
}
Screenshot is for reference only, the correct code to paste is the one shown above.
Remove the highlighted part if you want it to apply everywhere.
