Style Builder
Customize your widget appearance.
Preset themes
One click applies a complete look — tweak it further below, then copy the Generated CSS or save it to a token.
Live theme preview
Theme
Color scheme
Background
Background color
Blur effect
Background image
Image fit
Colors
Accent (art glow & progress)
Title color
Artist color
Border
Show border
Border width
Border color
Corner radius
Layout
Widget size
Show album art
Album art shape
Progress bar
Typography
Font
Custom font URL
Paste a font stylesheet URL (Google Fonts link, or any CSS that defines @font-face).
Custom font name
The exact font-family name from that stylesheet.
Text size
Font weight
Letter case
Text alignment
Italic text
Show artist
Show album
Animation
Animate the entire now-playing widget, including its background and border. Every new song starts a fresh display period.
After the entrance animation, wait this long before hiding or dimming. The next song makes the widget fully visible again.
50% keeps the whole widget half visible. Dimming fades smoothly without moving the card.
Song animation
Fixed timing: 500 ms in, 350 ms out. Fade is used when no animation is selected.
Album art pulse
Pulse color
Platform badge
Show platform badge
Preview platform
Preview only — the live widget shows the badge for the platform the token is connected to.
Advanced — custom CSS
For developers: this CSS is appended last and overrides the options above. Target .npw, .npw__title, .npw__art, etc.
Save this style
No account needed to use a custom style — copy the Generated CSS below into your OBS Browser Source's Custom CSS box. Sign in to save styles to a token instead.
Generated CSS — paste into OBS → Browser Source → Custom CSS (works without an account)
Preview on:
LIVE
Updates in real time
“Green” preset — paste the CSS import into OBS. Live widget updates in real time.