Two HLSL shaders for OBS Studio: a neon seven-segment clock overlay and a countdown timer with automatic colour-state changes and flash alerts. Fully configurable via sliders no scripting needed. Requires Exeldro's obs-shaderfilter plugin.
OBS Neon Clock & Countdown Timer Shaders
This pack contains two procedural HLSL shaders for OBS Studio that render GPU-drawn neon seven-segment displays directly on your stream or recording output no image assets, no browser sources, no additional software beyond the plugin listed below. Every digit, colon, dot, and glow effect is computed per-pixel in real time using signed distance field mathematics, which keeps the overlays crisp at any canvas resolution.
What Is Inside the Archive
-
digital-neon-clock.effect- a live clock overlay that reads the current system time and displays hours, minutes, optional seconds, and optional milliseconds. -
digital-neon-countdown.effect- a countdown timer overlay that counts down to a target time you set, with colour-state changes and a flashing effect when time runs low.
How to Apply a Shader in OBS
Assuming you already have the obs-shaderfilter plugin installed, follow these steps to apply a shader to a source in OBS:
- In OBS, right-click any source in your scene and choose Filters.
- Click the + button under Effect Filters and select User-defined shader.
-
In the filter settings, click Browse and select the
.shaderfile you want to use. - All parameters listed in the tables below will appear automatically as sliders, colour pickers, and checkboxes inside the filter panel.
Both shaders are designed to be applied to a Color Source (ex: Display Capture, Window Capture, Game Capture, Browser Source) set to full canvas size with zero opacity - this lets the overlay sit on top of your scene without affecting anything underneath it.
Shader 1 - Neon Clock (digital-neon-clock.effect)
Displays the current local time as a neon seven-segment clock. The shader
reads live system time variables provided by obs-shaderfilter
(current_time_hour, current_time_min,
current_time_sec, current_time_ms) so the display
updates every frame with no scripting required.
Layout & Position Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
Placement |
Select | Top Right | Anchors the clock to one of four canvas corners. Margin X and Margin Y push it inward from that corner. |
Margin X |
Slider (0-400 px) | 30 | Horizontal distance in pixels between the clock and the chosen canvas edge. |
Margin Y |
Slider (0-400 px) | 30 | Vertical distance in pixels between the clock and the chosen canvas edge. |
Digit Size |
Slider (20-300 px) | 84 | Height of each digit in pixels. All other proportions - segment width, glow radius, colon size - scale automatically from this single value. |
Display Options
| Parameter | Type | Default | Description |
|---|---|---|---|
Show Seconds |
Checkbox | On | Appends a colon and two-digit seconds group to the right of the minutes. The total clock width recalculates automatically so the anchor position stays correct. |
Show Milliseconds |
Checkbox | Off |
Appends a dot separator and three-digit milliseconds group. Useful for
reaction-time displays or high-frame-rate streams. Enabling this
alongside seconds gives a full HH:MM:SS.mmm readout.
|
Style Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
Digit Aspect (Width) |
Slider (0.30-1.00) | 0.62 | Controls the width-to-height ratio of each digit cell. Lower values produce a condensed, tall look; higher values widen each digit toward a square proportion. |
Segment Thickness |
Slider (0.04-0.28) | 0.11 | Controls how thick each segment bar is as a fraction of the digit height. Low values give a hairline LED aesthetic; high values produce a chunky, bold LCD style. |
Corner Radius |
Slider (0.0-0.5) | 0.0 | Rounds the ends of every segment. At 0 you get the classic sharp-cut display look. Higher values round each bar into a pill or stadium shape, resembling modern display hardware. |
Segment Gap |
Slider (0.0-0.25) | 0.0 | Trims a small amount from each segment end so adjacent segments do not bleed into one another at junctions. Most visible at high thickness values; gives a more authentic hardware LCD feel. |
Colour & Glow Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
Core Color |
Color picker | Bright cyan | The bright inner colour of each lit segment - the hottest part of the neon tube. |
Glow Color |
Color picker | Deep blue | The softer outer halo that radiates from each segment. Setting this to a complementary or contrasting hue creates a two-tone neon effect. |
Glow Intensity |
Slider (0.0-4.0) | 1.6 | Multiplier applied to the glow contribution. Higher values make the halo bloom further and brighter. Values above 2.5 produce an aggressive bloom suitable for dark scenes. |
Opacity |
Slider (0.0-1.0) | 1.0 | Master opacity for the entire overlay. Useful for blending the clock subtly into a scene without changing any colour values. |
Preset Style Combinations
| Preset Name | Aspect | Thickness | Corner Radius | Segment Gap |
|---|---|---|---|---|
| Classic Sharp | 0.62 | 0.11 | 0.0 | 0.0 |
| Modern Rounded | 0.62 | 0.13 | 0.40 | 0.05 |
| Thin Elegant | 0.50 | 0.05 | 0.30 | 0.0 |
| Chunky Retro | 0.70 | 0.22 | 0.10 | 0.08 |
Shader 2 - Neon Countdown Timer (digital-neon-countdown.effect)
Calculates the remaining time between the current system time and a user-defined target time, then renders it as a neon seven-segment display. As the remaining time crosses defined thresholds, the shader automatically transitions through three distinct colour states and triggers an optional flashing effect to draw viewer attention.
Target Time Parameters
| Parameter | Type | Range | Description |
|---|---|---|---|
Target Hour |
Slider | 0-23 | The hour component of your target end time in 24-hour format. The shader subtracts today's current time from this value to derive the countdown. |
Target Minute |
Slider | 0-59 | The minute component of the target end time. |
Target Second |
Slider | 0-59 | The second component of the target end time. Useful for scheduling countdowns to precise moments. |
Layout & Position Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
Placement |
Select | Center | Five options: Top Left, Top Right, Bottom Left, Bottom Right, and Center. Center ignores Margin X/Y and positions the timer exactly in the middle of the canvas. |
Margin X |
Slider (0-400 px) | 30 | Horizontal inset from the chosen corner edge. Has no effect when Placement is set to Center. |
Margin Y |
Slider (0-400 px) | 30 | Vertical inset from the chosen corner edge. Has no effect when Placement is set to Center. |
Digit Size |
Slider (20-300 px) | 100 | Height of each digit in pixels. All segment, glow, and spacing proportions scale from this value automatically. |
Display Options
| Parameter | Type | Default | Description |
|---|---|---|---|
Show Hours |
Checkbox | On |
Prepends an HH: group to the display. Turn this off for
sub-one-hour countdowns to save horizontal space and keep the focus on
minutes and seconds.
|
Show Milliseconds |
Checkbox | Off |
Appends a .mmm milliseconds group. Milliseconds count
upward from the current ms position toward the next second boundary,
giving a smooth continuous feel.
|
Flash & Alert Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
Flash When Low |
Checkbox | On | Enables the pulsing flash animation when remaining time drops below the Flash Threshold. The flash continues after the timer reaches zero so viewers cannot miss the end of the countdown. |
Flash Threshold |
Slider (0-60 s) | 10 | The number of remaining seconds at which the display switches to the Low Time colour pair and begins flashing. Set to 30 for a longer dramatic build-up or 5 for a last-second alert. |
Flash Speed |
Slider (0.5-8.0) | 3.0 | Frequency of the flash pulse in cycles per second. Lower values produce a slow, ominous throb; higher values create a rapid, urgent strobe effect. |
Colour States
The countdown uses three separate colour pairs that activate automatically based on timer state. Each pair has a Core Color (the bright inner segment) and a Glow Color (the outer halo).
| State | When It Activates | Parameters | Default Colours |
|---|---|---|---|
| Normal | Remaining time is above the Flash Threshold | Core Color, Glow Color |
White core / blue glow |
| Low Time | Remaining time drops below Flash Threshold |
Core Color (Low Time), Glow Color (Low Time)
|
Yellow core / orange glow |
| Finished | Target time has been reached or passed |
Core Color (Finished), Glow Color (Finished)
|
Red core / deep red glow |
Style Parameters
The countdown timer shares the same four style parameters as the clock shader, so you can match both overlays visually when using them in the same scene.
| Parameter | Type | Default | Description |
|---|---|---|---|
Digit Aspect (Width) |
Slider (0.30-1.00) | 0.62 | Width-to-height ratio of each digit cell. Also affects the dash glyph shown when the timer expires, keeping all glyphs visually consistent. |
Segment Thickness |
Slider (0.04-0.28) | 0.11 | Thickness of each segment bar as a fraction of digit height. The expiry dash glyph also respects this value. |
Corner Radius |
Slider (0.0-0.5) | 0.0 | Rounds each segment end using a rounded-box signed distance field. Applied consistently to digits and the expiry dash. |
Segment Gap |
Slider (0.0-0.25) | 0.0 | Inward trim at segment junctions to prevent adjacent segments bleeding into each other. Most effective at Thickness values above 0.15. |
Glow & Opacity Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
Glow Intensity |
Slider (0.0-4.0) | 1.8 | Global multiplier for the outer halo brightness across all three colour states. The flash animation modulates this at runtime, so very high values will produce an especially dramatic pulse during the low-time phase. |
Opacity |
Slider (0.0-1.0) | 1.0 | Master opacity for the entire timer overlay. The flash effect multiplies on top of this value, so the actual minimum opacity during a flash will be roughly 55% of whatever you set here. |
Frequently Asked Questions
Do these shaders work with any OBS source type?
Yes. While applying them to a full-canvas Color Source is the most common approach, you can also apply either shader as a filter on a Video Capture Device, a Game Capture, or any other source. The overlay will be composited on top of whatever that source renders, respecting transparency.
Can I use both shaders at the same time?
Absolutely. Add two separate Color Sources to your scene, apply one shader to each, and position them independently. Because each shader instance has its own filter parameters, you can give them different sizes, placements, and colour themes simultaneously.
The countdown timer shows the wrong remaining time. What should I check?
The shader calculates the countdown by subtracting the current system time from the target time within the same calendar day. If your target hour is earlier than the current hour, the remaining time will be negative and the timer will immediately display the Finished state. Always set a target time that is still in the future relative to your local system clock.
Why does Glow Intensity above 2.0 look different on dark versus bright scenes?
The shader composites the neon overlay using alpha blending over your source. On dark backgrounds, the additive glow has nothing to compete with and blooms freely. On bright backgrounds, the underlying pixels are already close to white, so the glow appears more contained. This is physically accurate behaviour neon signs look more vivid in the dark for the same reason.
Can I customise the colours per digit or per group?
Not currently. Both shaders apply a single colour pair globally across all digits. If you need per-group colouring, you would need to duplicate the shader file and modify the HLSL source directly, applying each instance as a separate filter.
Prepare your pre-stream screen
This starting soon screen is meant to turn the waiting period into part of the show. Use it before you go live to give viewers a clear countdown, set the visual tone, and avoid leaving early arrivals on a blank or unfinished scene.
For this specific resource, the key value is: Two HLSL shaders for OBS Studio: a neon seven-segment clock overlay and a countdown timer with automatic colour-state changes and. Use the link below only after reading the details above so visitors understand what they are opening and why it belongs in their streaming workflow.
([redirect_url])[Download OBS Neon Clock & Countdown Timer Shaders for obs-shaderfilter]