Pickle Systems
wwwLogin
Customize Wheel CSS+
/Streamer/Overlays
wwwLogin
Customize Wheel CSS+

Edit live, preview in real time, and save to your channel.

← Overlay Library Open live URL
Live URL: https://www.picklesystems.net/overlays/wheel_css/ — reads saved config directly. Save & go live pushes the current saved overlay to OBS/browser sources. This CSS+ wheel also lets Custom CSS override supported --ps-wheel-* variables before the canvas redraws.
Colours
Accent colour
Text colourmain wheel label and HUD text colour
Winner highlight colourwinner banner and highlight flashes
Panel backgroundwinner banner / HUD panel fill
HUD / panel opacitywinner banner and HUD panel background. This does not change wheel slices.
Wheel transparency0 = solid wheel slices, higher = more transparent
Typography
Font family
Font sizescales wheel labels and HUD title/subtitle/timer text
Font stylelabel weight and style used on the wheel
Text positionaway from centre ↔ closer to centre
Text stroke colouroutline around wheel labels
Text stroke thicknessthickness of the label outline
Text spacingwidens or tightens the space between each character
Wheel label scalescales names drawn on wheel segments
Wheel appearance
Pin colourmain pointer colour
Pin accent colourinner pointer accent
Spoke colourborder between segments
Hub colourcentre circle fill
Show centre hubturn the centre circle on or off
Hub sizesize of the centre circle when enabled
Hub iconupload a circular icon for the hub
Recommended icon size: 256×256 PNG with transparent background.
Show entrant count badgesmall count badge above the wheel
Show vignettesoft outer fade ring
Winner highlight colourwinner banner and trophy highlight
Wheel Panels
Panel colours cycle around the wheel. Remove colours with ×. Minimum 1, maximum 20.
Wheel Animations
Animation speedglobal speed multiplier for wheel motion and timed effects. 1 = normal
Spin duration (sec)how long a full winner spin runs before stopping
Winner display time (sec)how long the winner banner and trophy state stays visible after the spin ends
Confetti on winshows celebratory confetti when a winner is chosen
Runs a demo spin in the preview so you can verify motion, winner timing, and confetti without going live.
Wheel sounds
Upload sounds that play during the spin. mp3, wav, or ogg — up to 10MB each.
Spin sound
Loading…
Stop sound
Loading…
Tick sound
Loading…
Playback toggles
Custom CSS
Custom CSS is applied last for this channel. Wheel slice colours use --ps-wheel-slice-a … --ps-wheel-slice-t or --ps-wheel-slice-1 … --ps-wheel-slice-20. If you only provide a smaller slice palette, the CSS+ wheel now repeats those colours across the remaining slices automatically. Panel vars like --ps-panel-bg affect HUD/panels, not the wheel slices. Use the quick snippets below, then tweak the values in the editor.
Show CSS variable guide
Wheel slices
--ps-wheel-slice-a … --ps-wheel-slice-h
--ps-wheel-slice-1 … --ps-wheel-slice-20
Labels + pointer
--ps-wheel-label-color
--ps-wheel-label-stroke
--ps-wheel-pointer-color
--ps-wheel-pointer-accent
Rings + hub
--ps-wheel-hub-color
--ps-wheel-hub-inner-color
--ps-wheel-ring-outer
--ps-wheel-ring-inner
--ps-wheel-rim-stroke
Panels + HUD
--ps-panel-bg
--ps-panel-bg-rgb
--ps-panel-bg-alpha
--ps-wheel-hud-badge-bg
--ps-wheel-hud-badge-border
Winner + trophy
--ps-wheel-winner-banner-bg
--ps-wheel-winner-banner-border
--ps-wheel-winner-text-color
--ps-wheel-winner-font-size
--ps-wheel-winner-y
--ps-wheel-trophy-color
--ps-wheel-trophy-scale
Tip: the quick snippets append into the box below so you can keep parts you like.
Notes
Pushes these settings to your live OBS browser source immediately.
Saves a named snapshot you can re-apply later. Does not go live until you click Save & go live.
No saved designs yet. Use Save as personal design to create reusable looks.
Ready-made starter looks. Click Preview to see it in the preview pane, then Use to apply it.
Midnight Mint
Public · by PickleSystems · 7/4/2026 · Accent #2dd4bf
Violet Arcade
Public · by PickleSystems · 7/4/2026 · Accent #8b5cf6
Sunset Fire
Public · by PickleSystems · 7/4/2026 · Accent #f97316
Electric Lime
Public · by PickleSystems · 7/4/2026 · Accent #84cc16
Ice Blue
Public · by PickleSystems · 7/4/2026 · Accent #38bdf8
Gothic Crimson Wheel
Public · by PickleSystems · 7/4/2026 · Accent #8f1111
Live preview
100%
Preview runs in editor mode — overlays that normally hide can still be styled here.