Make your websites with Discord's design.

Setup

Just add this single line inside your `<head>` tag:

<link rel="stylesheet" href="https://discord-css.pages.dev/discord.css">

That’s it — your site instantly looks like Discord!

Discord.css in action

Why Discord.css?

Discord.css is built on top of Water.css and styled to match Discord’s look perfectly. It’s made for people who hate writing CSS but want beautiful Discord-themed sites (bot dashboards, status pages, etc.).

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Bold text • Normal paragraph • ~~Strikethrough~~ • Underline

Bullet points just work

A beautiful button

Dark/Light mode auto-detect

This page automatically switches between Discord’s dark and light theme based on your system preference — right now!

Rounded images

Code blocks

console.log('hello world')

Inline console.log('heyy!') also looks great.

Forms look native to Discord

Will you use Discord.css?

Yes (obviously)
Absolutely
100%

Remember me

Open Source

Fully open source • Fork it • Customize it • Use it everywhere
GitHub Repository →