One design element that’s certainly trending is the neon glow effect. By incorporating and playing with various lighting effects, you can create emphasize an element of your site or add some subtle mystery to the overall design. Whether you want to make a literal neon sign or just add a fun pop-culture vibe to your site, this effect is such a fun trend that allows designers to experiment!
The neon glow effect can be found around the web in lots of different forms. Some focus on the glowing, neon aspect, while others focus on the “reality” of a virtual neon sign. Here’s an example of the realistic approach:
Now that you’ve seen these neon signs in action, try it out for yourself!
Create a neon glow effect in Photoshop
Before we get started, let’s clarify a few things that will help you get the best results. For a realistic effect, you’ll want to find a font that either connects or has breaks like a real neon sign would. If you’re using an icon, using a simple outline will look a little cleaner, but feel free to experiment as you see fit. Let us know how it goes!
Create your background
For this example, I’m going to use this brick background from Unsplash. You can choose whatever you like, but this brick gives it a great, realistic feeling of hanging on a wall. And don’t worry – we’re going to give it a nighttime look to emphasize the glow!
To darken the image, create a new layer under and fill it with gray using the Paint Bucket Tool. I’m using #999999
. Then, set the opacity to something like 83% and change the blending mode for the image layer to Vivid Light.
Add dramatic lighting to the background
Now we’re going to create a vignette. To do this, create a new layer, and use the Ellipse Tool to draw an ellipse just slightly smaller than the canvas.
Then, with the Path Selection Tool, select Path Operations dropdown and click Subtract From Shape.
Open the properties window with Window > Properties and select Mask. Then set Feather to 200px and adjust it with the Free Transform Tool as you please. It should look something like this then:
Create a new layer above the vignette layer with Layer > New Layer and fill it with black using the Paint Bucket Tool. Then, set the opacity to something like 75% and change the blending mode for the layer to Vivid Light.
Create the neon sign
For this example, I’m going to use the typeface Beon Medium to spell out “Layout,” but you can choose any typeface, phrase, or icon you like! From here, you can position your text however you like.
Duplicate the text layer, right click it, and select Convert to Smart Object. Then, right click the layer and select Blending Options.
Add a Bevel & Emboss. This gives dimension to the text, so try various settings to get the effect you like! I’m using these settings:
- Style: Pillow Emboss
- Technique: Smooth
- Depth: 251%
- Direction: Up
- Size: 15px
- Soften: 3px
- Shading angle: 90 degrees
- Altitude: 53 degrees
- Gloss Contour: Cove – deep
- Highlight Mode: Overlay with white and 100% opacity
- Shadow Mode: Overlay with black and 0% opacity
Next, add a Contour adjustment under Bevel & Emboss, select cove – deep from the dropdown, and leave the range at 100%.
Now add a Stroke layer. This will create the “glow” of your neon sign and make it look like it’s turned on! Here are the settings I’m using:
- Size: 40
- Position: Center
- Blend Mode: Screen
- Opacity: 100%
- Overprint: Checked
- Fill type: Gradient
- Style: Shape Burst
- Align with Layer: Checked
- Angle: 90 degrees
- Scale: 100%
Now let’s create your custom gradient by double clicking the color shown in the gradient bar. Add a transparent color to the left, a dark color toward the center (I used #51bbad), and a lighter blue just to the right of the darker center color (I used #a1fff3). This will give your glow the perfect depth to make it look like the plastic of a real neon sign.
Now let’s add an Outer Glow, to create the light the shines off our neon sign. Here are the settings I’m using:
- Blend Mode: Overlay
- Opacity: 100%
- Noise: 0%
- Technique: Softer
- Spread: 20%
- Size: 250px
- Contour: Linear
- Range: 50%
- Jitter: 0%
And select the same color as your text. Again, I’m using #50c4da
.
Create a custom gradient lights
To add to the glowing effect, let’s create two layers. One with a broad and subtle glow, and another with a small and concentrated effect behind the text, to give it a realistic effect. First, let’s create the larger, subtle glow.
Using the Ellipse Tool, create an ellipse that spans all of the text and most of the background. Set the color to something slightly darker than the color you chose for your text. I’m using #51bbad
. Then, right click the layer and select Convert to Smart Object.
Then, with the ellipse layer selected, select Filter > Blur > Gaussian Blur.
Set the radius to somewhere around 150 pixels. Now change the blending options to Soft Light.
Create a new layer to create another ellipse, this time smaller and about the size of the text. Move it under the text layer but above the other ellipse layer. Again, convert the ellipse to a smart object.
Set the color to something slightly lighter than the text color you chose. I’m using #a1fff3
.
Then, with this new ellipse layer selected, select Filter > Blur > Gaussian Blur. Set the radius to somewhere around 150 pixels. Now change the blending options to Soft Light.
And that’s all of it – now you have a bright and shiny neon sign! How will you use this effect? Have any other favorite examples? Let us know in the comments.
How to use the Photoshop templates
Download the templates for free below!
Toggle the backgrounds
In these files, there are various backgrounds you can toggle on and off with the layer visibility buttons or move under and above each other in the layers panel. Pick your favorite or add your own background into a new layer. If you add a custom background, just resize it however you like!
Edit the text
To edit the text, open the “On” folder and double click the “On – Double click to edit text” layer.
This will pull up another Photoshop document where you can use the Text Tool to edit the text or adjust the font. The key here is to resize the text to fit within the given area. (Anything outside of the bounds will not carry over to the main file!) You can do this by selecting Edit > Free Transform or Command + T on a Mac (Control + T on a PC). When you’re happy with it, save and close the smart object or Photoshop tab.
Note: The “On” and “Off” layers are synced, so when you edit the smart text in one, it’ll update in the other. Pretty sweet, right?!
Adjust extra pieces
Depending on which effect you choose, you may have to adjust the outer square or line. If you’re using “Neon_Sign_Treatment2,” you can disregard this section. For “Neon_Sign_Treatment3,” if you find yourself needing to adjust the box, simply open the dropdown for “On” and “Off.” From here, you’re able to transform the Sign Border layer by selecting Edit > Free Transform or Command + T on a Mac (Control + T on a PC). The key is to adjust both the “On” and “Off” Sign Border layers equally.
For “Neon_Sign_Treatment1,” you may want to adjust the line below the text. To do that, open the “On” folder and double click the “On – Double click to edit text” layer. Here you can adjust the line so it touches the bottom of your text. Again, if you update it from the “On” layer, it’ll also update within the “Off” layer. (And vice versa!)
If you would like to change the “Cords” layer in “Neon_Sign_Treatment1,” select the layer and, using the Direct Selection Tool, click the individual points and drag them around. You can even add or subtract specific points in the line using the Pen Tool, Add Anchor Point Tool, and Subtract Anchor Point Tool. And if the arch of the cord isn’t how you like it, just use the Convert Point Tool until you’re happy with the results.
If you need to adjust the glow after moving around the various objects, simply open the “On” folder and select the “Highlight” layers. From here, you can drag them around using the Move Tool or shrink and grow them with Edit > Free Transform.
Now you have the perfect, easy-to-use tool to create your own neon glow effects. Have fun designing!
Download the free templates!
Want to download the templates used above? Click below to get started!
Ready for more inspiration?
Learn what the top design trends are here.
Comments ( 101 )
Brianexill
May 7, 2025
Hit up Mature Milf Pussy to check out older lusty cougars showing their nude slit ready wide for your eyes only. These freaks are built to get pounded, and every one of our pics proves it.
Matthewmon
May 7, 2025
Catch a experienced vintage babe giving mouth rides to a hard-bodied stud, then taking cum deep in her butt. That's the kind of nasty we keep live on BESTSEXPICS.NET, and it's all free to click.
Matthewmon
May 6, 2025
www.bestsexpics.net is packed with collections of real vintage babe getting their pussy stretched and ass drilled. Some even take double stuffing. It's raw, filthy, and totally stripped.
MichealSab
May 4, 2025
In MILFMUTTERFOTOS.COM findest du oben ohnee geile Mamas, die sich nach echtem Rammeln sehnen. Diese Mutters zeigen alles – Löcher, die nur darauf warten, benutzt zu werden. Unsere Bilderreihe ist kostenlos und komplett versaut.
Kelvinsedia
May 4, 2025
Bei HTTPS://MILFMUTTERFOTOS.COM/ haben wir reife Fraus, die wissen, wie man einen Ehemann mit Dominanz und Dildo-Gurt behandelt. Diese MILFs lieben es, die Kontrolle zu Гјbernehmen. Die SchnappschГјsse sind frei verfГјgbar und nackt.
Kelvinsedia
May 3, 2025
bilder bietet dir Erwachsenenfilm mit geile Mamas, die in echten Fremdfick-Fan Szenen alles geben. Schwarze Dödele, offene Münder und heiße Mutti - Bilder wie aus deinen schmutzigsten Träumen.
Thermal Transfter Labels
May 1, 2025
Thank you for the insightful and creative article! It was packed with great ideas and valuable information. I really appreciate the efforts from a top Direct Thermal Labels. Your expertise is invaluable.
ElmerSip
May 1, 2025
pin-up: pin up azerbaycan - pin-up
Kennethsheby
April 30, 2025
вавада зеркало: vavada casino - вавада
ZackaryCaush
April 30, 2025
https://pinuprus.pro/# пинап казино
Richardmat
April 30, 2025
пинап казино [url=https://pinuprus.pro/#]пин ап зеркало[/url] пинап казино
ElmerSip
April 30, 2025
pin-up casino giris: pin-up casino giris - pin up az
Kennethsheby
April 30, 2025
vavada: вавада казино - vavada вход
ZackaryCaush
April 30, 2025
http://pinupaz.top/# pin up casino
ElmerSip
April 30, 2025
pin up: pin up azerbaycan - pin up casino
Richardmat
April 30, 2025
pin up az [url=http://pinupaz.top/#]pin-up[/url] pin up azerbaycan
Kennethsheby
April 30, 2025
pin-up casino giris: pinup az - pin-up casino giris
ZackaryCaush
April 30, 2025
http://vavadavhod.tech/# vavada
ElmerSip
April 30, 2025
vavada: вавада казино - vavada вход
Richardmat
April 30, 2025
pin up [url=https://pinupaz.top/#]pin-up casino giris[/url] pin-up casino giris
Kennethsheby
April 30, 2025
пинап казино: pin up вход - пин ап казино
ZackaryCaush
April 30, 2025
http://pinuprus.pro/# пинап казино
ElmerSip
April 30, 2025
вавада: вавада официальный сайт - вавада казино
Richardmat
April 30, 2025
пин ап казино [url=https://pinuprus.pro/#]пин ап зеркало[/url] пин ап казино официальный сайт
Kennethsheby
April 30, 2025
пин ап зеркало: пинап казино - пин ап вход
ZackaryCaush
April 30, 2025
http://pinupaz.top/# pin up azerbaycan
ElmerSip
April 30, 2025
pin up: pin-up casino giris - pin-up
Michaeljouch
April 30, 2025
mail order pharmacy india [url=http://medicinefromindia.com/#]online pharmacy india[/url] MedicineFromIndia
MichaelFaulp
April 30, 2025
canadianpharmacy com: Canadian pharmacy shipping to USA - canadian pharmacy phone number
Stevendrype
April 30, 2025
medicine courier from India to USA: Medicine From India - indian pharmacy online
Dannysit
April 29, 2025
mexican rx online: RxExpressMexico - mexico pharmacies prescription drugs
MichaelFaulp
April 29, 2025
RxExpressMexico: mexican online pharmacy - RxExpressMexico
Michaeljouch
April 29, 2025
mexican online pharmacies prescription drugs [url=https://rxexpressmexico.shop/#]mexican pharmaceuticals online[/url] mexican online pharmacy
Walterhap
April 29, 2025
https://expressrxcanada.com/# reliable canadian pharmacy
Dannysit
April 29, 2025
Rx Express Mexico: mexican rx online - mexican rx online
Stevendrype
April 29, 2025
mexican online pharmacy: buying from online mexican pharmacy - mexico pharmacy order online
Walterhap
April 29, 2025
http://expressrxcanada.com/# best canadian online pharmacy
MichaelFaulp
April 29, 2025
MedicineFromIndia: Medicine From India - MedicineFromIndia
Michaeljouch
April 29, 2025
Rx Express Mexico [url=http://rxexpressmexico.com/#]mexico drug stores pharmacies[/url] Rx Express Mexico
Dannysit
April 29, 2025
medicine courier from India to USA: indian pharmacy - MedicineFromIndia
Stevendrype
April 29, 2025
ed drugs online from canada: Express Rx Canada - best rated canadian pharmacy
Walterhap
April 29, 2025
https://rxexpressmexico.com/# buying prescription drugs in mexico
Dannysit
April 29, 2025
medicine courier from India to USA: Medicine From India - indian pharmacy online shopping
MichaelFaulp
April 29, 2025
Medicine From India: medicine courier from India to USA - MedicineFromIndia
Stevendrype
April 29, 2025
india online pharmacy: Online medicine order - MedicineFromIndia
Michaeljouch
April 29, 2025
Medicine From India [url=http://medicinefromindia.com/#]Medicine From India[/url] indian pharmacy
Walterhap
April 29, 2025
https://rxexpressmexico.com/# mexico pharmacy order online
Safepestsol
April 29, 2025
Ants can live for varying lengths of time depending on their species. Worker ants typically live for a few months to a year, while queens can live for several years, sometimes up to 15 years, depending on the species and environmental conditions.
Visit:
https://safepestsol.com/how-long-ants-can-live/
Dannysit
April 29, 2025
canadian pharmacy king reviews: Canadian pharmacy shipping to USA - my canadian pharmacy reviews
Stevendrype
April 29, 2025
canadian pharmacy no scripts: Generic drugs from Canada - best mail order pharmacy canada
MichaelFaulp
April 29, 2025
cheap canadian pharmacy: Buy medicine from Canada - canadian pharmacy world
Michaeljouch
April 29, 2025
indian pharmacy online shopping [url=https://medicinefromindia.shop/#]indian pharmacy[/url] indian pharmacy
Stevendrype
April 28, 2025
mexico drug stores pharmacies: Rx Express Mexico - mexico pharmacy order online
Dannysit
April 28, 2025
canadian pharmacy 24h com safe: Express Rx Canada - my canadian pharmacy
MichaelFaulp
April 28, 2025
medicine courier from India to USA: indian pharmacy online - indian pharmacy online shopping
Michaeljouch
April 28, 2025
mexico drug stores pharmacies [url=https://rxexpressmexico.com/#]mexican online pharmacy[/url] Rx Express Mexico
jiliapp
April 28, 2025
I really enjoyed reading your comment. Your thoughts were so well-organized and provided a great addition to the post. I appreciate how clearly you articulated your viewpoint, and I look forward to reading more of your thoughts!jiliapp
Walterhap
April 28, 2025
https://expressrxcanada.com/# canadian pharmacy meds reviews
Stevendrype
April 28, 2025
canadian pharmacy scam: Buy medicine from Canada - cheap canadian pharmacy
Dannysit
April 28, 2025
Medicine From India: Medicine From India - indian pharmacy
MichaelFaulp
April 28, 2025
canada ed drugs: Express Rx Canada - buy drugs from canada
Michaeljouch
April 28, 2025
my canadian pharmacy rx [url=http://expressrxcanada.com/#]ExpressRxCanada[/url] vipps canadian pharmacy
Walterhap
April 28, 2025
http://expressrxcanada.com/# www canadianonlinepharmacy
Dannysit
April 28, 2025
mexican drugstore online: п»їbest mexican online pharmacies - mexico drug stores pharmacies
Stevendrype
April 28, 2025
RxExpressMexico: mexican online pharmacy - Rx Express Mexico
MichaelFaulp
April 28, 2025
best canadian pharmacy online: Buy medicine from Canada - canada cloud pharmacy
PeterUnomb
April 28, 2025
kamagra pas cher [url=https://kamagraprix.com/#]acheter kamagra site fiable[/url] kamagra pas cher
BernardVeida
April 28, 2025
kamagra livraison 24h: Achetez vos kamagra medicaments - kamagra pas cher
Robertmut
April 27, 2025
https://pharmafst.shop/# pharmacie en ligne france pas cher
BernardVeida
April 27, 2025
pharmacie en ligne france fiable: Pharmacie Internationale en ligne - pharmacie en ligne fiable pharmafst.com
BernardVeida
April 26, 2025
acheter mГ©dicament en ligne sans ordonnance: Achat mГ©dicament en ligne fiable - pharmacie en ligne france livraison internationale pharmafst.com
Bradleyfup
April 26, 2025
pharmacie en ligne avec ordonnance: pharmacie en ligne pas cher - acheter mГ©dicament en ligne sans ordonnance pharmafst.com
PeterUnomb
April 26, 2025
vente de mГ©dicament en ligne [url=https://pharmafst.shop/#]pharmacie en ligne sans ordonnance[/url] vente de mГ©dicament en ligne pharmafst.shop
Robertmut
April 26, 2025
https://pharmafst.shop/# vente de mГ©dicament en ligne
Robertmut
April 26, 2025
https://tadalmed.shop/# Achat Cialis en ligne fiable
BernardVeida
April 26, 2025
Acheter Cialis 20 mg pas cher: Acheter Cialis - Cialis sans ordonnance 24h tadalmed.shop
Bradleyfup
April 26, 2025
kamagra gel: kamagra oral jelly - kamagra pas cher
Robertmut
April 26, 2025
https://kamagraprix.com/# acheter kamagra site fiable
BilliesniCt
April 26, 2025
pharmacie en ligne france fiable: pharmacie en ligne fiable - pharmacie en ligne fiable pharmafst.com
PeterUnomb
April 25, 2025
Achetez vos kamagra medicaments [url=http://kamagraprix.com/#]acheter kamagra site fiable[/url] kamagra oral jelly
Bradleyfup
April 25, 2025
kamagra gel: kamagra gel - kamagra pas cher
Robertmut
April 25, 2025
https://tadalmed.shop/# Tadalafil achat en ligne
Bradleyfup
April 25, 2025
Tadalafil 20 mg prix sans ordonnance: Tadalafil achat en ligne - Tadalafil sans ordonnance en ligne tadalmed.shop
Robertmut
April 25, 2025
https://tadalmed.shop/# cialis generique
BilliesniCt
April 25, 2025
kamagra pas cher: kamagra 100mg prix - acheter kamagra site fiable
BernardVeida
April 25, 2025
pharmacie en ligne livraison europe: pharmacie en ligne livraison europe - pharmacie en ligne pharmafst.com
PeterUnomb
April 25, 2025
kamagra en ligne [url=http://kamagraprix.com/#]kamagra pas cher[/url] achat kamagra
Bradleyfup
April 25, 2025
Achat Cialis en ligne fiable: Tadalafil 20 mg prix sans ordonnance - cialis generique tadalmed.shop
Robertmut
April 25, 2025
https://pharmafst.com/# pharmacie en ligne france livraison belgique
BernardVeida
April 25, 2025
Achat mГ©dicament en ligne fiable: pharmacie en ligne pas cher - Pharmacie en ligne livraison Europe pharmafst.com
BilliesniCt
April 25, 2025
achat kamagra: Kamagra Oral Jelly pas cher - kamagra pas cher
PeterUnomb
April 25, 2025
vente de mГ©dicament en ligne [url=https://pharmafst.com/#]Livraison rapide[/url] pharmacies en ligne certifiГ©es pharmafst.shop
Bradleyfup
April 25, 2025
kamagra oral jelly: kamagra en ligne - Kamagra Commander maintenant
BernardVeida
April 25, 2025
acheter kamagra site fiable: kamagra pas cher - Kamagra Oral Jelly pas cher
DavidSaisp
April 24, 2025
Kamagra Commander maintenant: kamagra oral jelly - Acheter Kamagra site fiable
Edwardtoupe
April 23, 2025
olympe casino: casino olympe - olympe casino
Focal one
March 1, 2025
I'm extremely impressed together with your writing skills
and also with the format for your weblog. Is that this a
paid subject or did you modify it yourself? Either
way keep up the excellent quality writing, it's uncommon to see a
nice blog like this one today.. https://menbehealth.wordpress.com/
RandyZorie
February 21, 2025
These girls aren't just focused on the physical; many of them are eager to take part in sensual stripping, pleasuring their orgasmic selves, and even indulging in the pleasures of others. The variety of actions displayed in these galleries will captivate, as these black beauties pour their all into every functionality. This extensive assortment of XXX offers ample material to fulfill all of your desires - especially if you've got a penchant for ebony goddesses. Because the actions unfolds, witness stiff members erupting with interest and smiling faces adorned with the aftermath. Having a plethora of black porn stars, hundreds of top-notch images, and a variety of hardcore scenes, this collection of galleries will please even the most discerning of tastes.
Shivani Raja
October 4, 2020
Thank you SO much for this tutorial!!
Drake Ramoray
July 30, 2020
Thanx For sharing! That was really helpful! I was wondering what was the font you used for the "Hustle" one?
Chris
July 26, 2020
Where is the free template? I don't see any link. Thanks