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
Plays on every new track: the current info animates out, then the new track animates in.
Song animation
Fixed timing: 500 ms in, 350 ms out.
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.