Dice Roller
Free tabletop dice roller. d4, d6, d8, d10, d12, d20, d100. Up to 20 dice at once.
CUSTOMIZE
Pick a theme. Die type and count get baked into the embed URL.
EMBED ON YOUR SITE
Set a die type, count, and theme above. The iframe and the offline HTML both open with that default.
ABOUT THIS WIDGET
The Astryke Dice Roller is a free embeddable dice roller widget for tabletop RPGs, board game blogs, classroom probability lessons, and game-dev demos. Roll d4, d6, d8, d10, d12, d20, or d100. Up to twenty dice in a single roll. Three themes, crit and fumble detection on d20, ten-roll history. Drop into any blog post, wiki page, course, or HTML file. Or download it as a single self-contained HTML file that plays offline forever.
Why use this widget instead of the alternatives
- Free. Always. No paywalls, no upgrade nags, no time-limited trials.
- No ads on the widget itself. Astryke runs analytics on its own site, but the iframe-embedded version loads nothing extra and shows nothing extra.
- No tracking on the embedded version. The widget loads no Google Analytics, no Cloudflare Web Analytics, no third-party scripts inside the iframe.
- Mobile-friendly. The 480 by 520 canvas scales responsively, taps work without delay, and the controls stay reachable on phone screens.
- Offline-capable. Download a single self-contained HTML file that plays without an internet connection. Pack it inside your own app, share it as a file, host it yourself.
- Modern look. Three carefully tuned themes (Ivory, Obsidian, Casino), Cinzel display type, smooth canvas rendering. Sits cleanly inside any blog theme.
- Honest randomness. Math.random() per roll, no animation tricks that hide a predetermined outcome.
- No accounts, no signup, no login. Anywhere. Ever.
What makes it great
- Seven die types: d4, d6, d8, d10, d12, d20, d100. The full standard tabletop set, plus percentile.
- Roll one to twenty dice at a time. The grid auto-arranges so all dice fit on screen, even when you bring twenty d6 for a fireball.
- Three preset themes: Ivory (classic black numerals on parchment), Obsidian (deep black with gold numerals), Casino (deep red with white pips and border).
- Crit and fumble detection on d20. Any natural 20 turns the die gold and triggers a triumphant ascending arpeggio. Any natural 1 turns the die deep red and triggers a descending fumble sound.
- Ten-roll history with totals. Glance at recent rolls without scrolling away.
- Four Web Audio synthesized sounds: rattle, settle (per die landing), crit fanfare, fumble descent. Zero audio file downloads. Mute button if you need silence.
- URL-param customization. Embed ?type=d20&count=3&theme=obsidian and every visitor sees that default configuration. Sticky across refreshes without cookies or localStorage.
- Bake-on-download. Configure on astryke.com, click Download as HTML, get a file with your defaults baked in.
- Canvas-drawn 2D polygons (triangle for d4, square for d6, rhombus for d8, pentagon for d10, hexagon for d12, octagon for d20, paired pentagons for d100). Crisp at any zoom, no image assets to load.
- Custom right-click menu instead of the browser default, branded with a link back to Astryke.
- Hi-DPI canvas rendering for sharp visuals on Retina and 4K displays.
Where this works well
Tabletop RPG blogs and play-by-post sites. Embed alongside encounter writeups, character sheets, monster stat blocks, or play-by-post forum threads. Players roll publicly, no Discord bot setup, no app install.
D&D wikis and adventure modules. Drop a d20 roller into every saving-throw table and skill check example. Readers see the math working live instead of just reading about it.
Game-dev tutorials on probability and RNG. Demonstrate central limit theorem with twenty d6 in one roll. Show standard deviation moving as count changes. Teach expected value with d20 plus modifier examples.
Classroom probability lessons. Working physical-feeling dice without distributing physical dice. Free to embed in any course platform, no student accounts to manage.
Streamer overlays and Twitch panels. Embed as a Twitch panel for chat-driven decisions. Theme it Obsidian for cyberpunk streams, Casino for game-show formats, Ivory for cozy tabletop streams.
Convention and event games. Run a quick lobby game from a phone. No download, no signup. Tap ROLL, settle a tiebreaker, move on.
Game jams and prototype scaffolding. Drop a working dice mechanic into a one-HTML jam game. The standalone download gives you the whole working roller as plain readable JavaScript.
Customization in detail
Theme presets. Three themes: Ivory (cream-white die face, black border, black numerals; the classic tabletop look), Obsidian (deep black face, gold border, bright gold numerals; cinematic for dark settings), Casino (deep red face, white border, white numerals; a craps-table feel). Each theme repaints all visible dice in one click. Themes do not affect the math or odds, only the look.
Die type and count. Tap any chip in the top row to switch die type. Tap the minus and plus buttons under COUNT to add or remove dice, from one up to twenty. The grid auto-arranges: one die centered large, four dice in a 2x2, nine in a 3x3, twenty in a 5x4. The ROLL button label updates to show your current configuration (for example, ROLL 3D20).
URL params. Configuration persists via URL query parameters in the embed iframe src. Examples: ?type=d20 sets the die type; ?count=3 sets the dice count; ?theme=obsidian switches the theme; all combine. The Copy Embed Code button generates the right URL automatically. URL params survive page refresh, work in iframes, and require no cookies or localStorage.
Crit and fumble. Specifically on d20: any rolled value of 20 (across any die in the roll) is treated as a critical hit. The 20-die turns gold, a CRIT banner appears in the result strip, and an ascending arpeggio plays. Any rolled value of 1 is treated as a fumble. The 1-die turns deep red, a FUMBLE banner appears, and a descending triangle-wave sound plays. Other die types do not trigger crit or fumble effects.
Mute. A small speaker icon in the top-right header toggles all sounds. Useful for embeds in pages where audio would be disruptive, or for quiet rolling at the table.
Frequently asked questions
Is the dice roller widget free to use commercially?
Yes. Use it in client work, in a paid game, in a monetized blog post, in a product demo, in a published adventure module. No attribution required. The watermark at the bottom right links back to Astryke regardless, which is how the project funds future widgets.
Is the randomness real or scripted?
Real. Every die rolls Math.random() to pick a value out of its full range, before the animation starts. The shaking animation is purely visual feedback during the rattle. There is no rigging, no last-second adjustment, no pity timer. The values you see are the values that were drawn.
Will visitors to my embedded widget be tracked by Astryke?
No. The iframe-embedded version does not load Google Analytics, Cloudflare Web Analytics, or any third-party tracking. Visitors to astryke.com itself are measured, but visitors who only interact with embedded widgets on your site are not.
Does this work on phones and tablets?
Yes. The canvas scales responsively, touch is supported without delay, and the controls (die-type chips, count buttons, roll button) are tappable on phone screens.
Can I roll modified rolls like d20+5 or 4d6 drop lowest?
Not in v1. The widget rolls the raw dice. Modifiers and drop-lowest logic stay on the player or DM. A future Dice Roller upgrade may add an expression input for full notation like 4d6kh3+2, but for now the dice are clean.
Will my configuration persist if visitors refresh the page?
Yes, because configuration lives in the iframe URL. Every refresh sees the same die type, count, and theme. No cookies, no localStorage.
Can I edit the source code of the downloaded HTML file?
Yes. The standalone HTML is plain readable JavaScript. Open it in a text editor, change colors, adjust the polygon shapes, swap fonts, do whatever you want. No build step required.
Will this slow down my page?
No noticeable impact. The iframe lazy-loads (loading=lazy), the standalone is under 30 KB, and there are no third-party scripts. Lighthouse scores stay clean.
Can I run multiple dice rollers on the same page?
Yes. Each iframe is independent. Configure each one differently via the URL params if you want, for example one d20 next to a 3d6.
Why is d100 shown as two pentagons?
Because that is the physical layout of a real percentile pair in tabletop gaming: a tens d10 and a ones d10. The widget mirrors the real-world tens-and-ones reading. The total is the value displayed in the history row and the result strip.