A drop-in collection of CSS styles to make simple websites just a little nicer


NPM page On Product Hunt Contributors MIT license


🌊 A drop-in collection of CSS styles to make simple websites just a little nicer



  • Responsive
  • Themeable
  • Good browser support (works on my old kindle's browser :P)
  • Tiny size
  • Beautiful
  • No classes


I commonly make quick demo pages or websites with simple content. For these, I don't want to spend time styling them but don't like the ugliness of the default styles.

Water.css is a CSS framework that doesn't require any classes. You just include it in your <head> and forget about it, while it silently makes everything nicer.


You might want to use Water.css if you're making a simple static page or demo website that you don't want to spend time styling.

Although it originally wasn't built for more complex websites, many developers have used Water.css as a base stylesheet and creatively applied custom styles to build out an entire app. Nothing is stopping you from doing the same!


Just stick this in your <head>:

πŸŒ™ / β˜€ Automatic Theme:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">

πŸŒ™ Dark Theme:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css">

β˜€ Light Theme:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css">

A preview of the different themes is available on the demo page! ⚑

How the "Automatic Theme" works

The main water.css file automatically switches between light and dark mode depending on the system preferences of a user's device. This detection is made possible through a CSS media query called prefers-color-scheme. In browsers where the preference can't be detected, water.css will stick to the light theme.

If you want to avoid this behavior, use either dark.css or light.css.

Supporting Internet Explorer

All three distributions of Water.css support Internet Explorer 11, but the main water.css file doesn't respect the user's color scheme and will be locked to light mode due to lack of prefers-color-scheme support.

Be aware that IE also doesn't support runtime theming, and fixed fallback values will be used. If you want to override the Water.css theme in a way that's compatible with IE, we recommend that you compile your own theme.

Unminified builds

All versions are also available as unminified stylesheets, which can be handy during development.
Simply remove the .min from the file name.


Do you want to make some adjustments or build your own theme completely different from the official dark or light themes? Since Water.css is built with CSS variables this is super easy to do! Here's a list list of all the variables you can change to your liking:

  • --background-body
  • --background
  • --background-alt
  • --selection
  • --text-main
  • --text-bright
  • --text-muted
  • --links
  • --focus
  • --border
  • --code
  • --animation-duration
  • --button-hover
  • --scrollbar-thumb
  • --scrollbar-thumb-hover
  • --form-placeholder
  • --form-text
  • --variable
  • --highlight
  • --select-arrow

Runtime theming

⚠ If you use a version with support for legacy browsers like Internet Explorer, skip to Compiling your own theme!

Water.css uses Custom Properties ("CSS variables") to define its base styles such as colors. These can be changed and overwritten right in the browser.

Because of this, you can simply add your own stylesheet to the page and set your own CSS variables there. As long as your stylesheet comes after Water.css in the HTML, your values will override the default ones and your theme is applied!

This short example will use Water.css, but color all links red:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/water.css@2/out/water.min.css" />
  :root {
    --links: red;

If you want to change a value for dark or light mode only, use a media query like this:

  :root {
    --links: blue; /* Always applied */

  @media (prefers-color-scheme: dark) {
    :root {
      --links: yellow; /* Only applied in dark mode (overrides blue) */

Compiling your own theme

If you are targeting browsers without support for CSS Custom Properties such as Internet Explorer, runtime theming is not an option. To apply your own theming, you'll need to make your changes in the source files themselves, then re-compile the CSS files. This works like the following:

  • Clone the repository to your machine
  • Run yarn to install dependencies
  • Make the theming changes you want in src/variables-*.css
  • Run yarn build to compile the CSS files
  • Use the compiled files in the out/ directory on your site

You also might want to check out the Contributing Guide as it contains further information about the build setup.


Water.css becomes better for everyone when people like you help make it better!

Check out our Contributing Guide to learn how to get started.
And thanks for taking the time to contribute! :)

  • Water.css 2.0

    Water.css 2.0

    πŸŽ‰πŸŽ‰πŸŽ‰ This PR proposes merging Water.css 2.0.0 into master!

    @kylejrp you said there were some comments you wanted to make, what are they?

    Also, this introduces a lot of changes - how can we best summarize them for the changeset?

    This closes #187.

    opened by kognise 41
  • Next Steps

    Next Steps

    EDIT: Here's the current checklist:

    • [x] Update the old jsdelivr url to the new one everywhere
    • [x] Remake the file structure and docs #191
    • [x] Add redirects from the github pages site #158
    • [x] Update the demo site url to watercss.kognise.dev everywhere
    • [x] Add the bookmarklet #20
    • [x] Create a changeset and merge into master
    • [ ] Publish 2.0

    As far as I can see, here's the current state of Water.css 2.0:

    • There are several conflicting pull requests relating to the documentation site, and it's likely that merging the wrong ones will completely break the site.
    • The css file that the site references is out of sync with the one that's currently in the readme, and the readme references some features that aren't yet in the site.
    • We're currently included the built css files in the repository and managing versions with git tags, but this makes contributing more complex and pull requests significantly harder to merge.
    • The plan is to use npm for version management in the future, but then existing sites won't receive updates unless we also continue pushing git tags.
    • The development workflow, currently based on gulp, isn't ideal and has a few issues.
    • We're currently using netlify to deploy the documentation site but there have been some concerns raised about their new policies.

    I'd love feedback on what we should do about these things but here's what I've been thinking:

    I think we should stop including the dist folder within the repository and instead rely on a continuous integration platform, potentially github actions, to build the code and deploy it to both a git tag and npm. This will make contributing easier and ensure that existing sites get updates.

    I'm not entirely sure about this, but we might want to consider completely remaking the documentation site and build pipeline with something slightly less janky. We could also consider deploying the site to a different service, maybe vercel? This will give the added benefit of being able to gracefully switch over to the new documentation.

    Furthermore, a lot of the issues are simply caused by multiple pull requests that have overlap and merge conflicts - I propose instead we create one monster pr that when merged will update everything.

    Sorry for the huge block of text, please tell me if I was unclear in any way!

    cc @kylejrp @kimulaco @jonaskuske @JackFly26

    opened by kognise 29
  • ::selection


    By darkening the background color by 40% we can get a nice background color for selections.

    I propose adding something like this:

    ::selection {
      background-color: darken($background-color, 40%);
    enhancement good first issue 
    opened by diomed 25
  • [WIP] New File Structure + Version Picker

    [WIP] New File Structure + Version Picker

    This PR changes the file structure to water.css, dark.css, and light.css. It also introduces a full rewrite of the version picker on the documentation site.


    • [x] Add fancy animations, @jonaskuske :)
    • [x] Wire up the copy to clipboard button
    • [x] Update the readme with the new files

    Are there any other changes in scope of this pull request?

    opened by kognise 20
  • prefers-color-scheme



    Be good if you can support Safari media queries so that if a user wants a dark scheme, they would get one. And if a user doesn't, they would get a light theme instead?

    opened by kaihendry 20
  • ::selection makes --text-muted barely visible

    ::selection makes --text-muted barely visible

    Both the ::selection color and --text-muted are a sort-of similar shade of gray, so selecting text that's muted, e.g. a <footer> / <cite> means the text becomes very hard to read.

    bug help wanted good first issue accessibility 
    opened by jonaskuske 17
  • Accessibility Compliance

    Accessibility Compliance

    We should pick a specific level of accessibility and make sure all of our components meet that level of accessibility.


    • Choose between AA and AAA accessibility
    • Add an accessibility checker to our gulp build tools and/or pull requests
    • Make sure each CSS component complies with our accessibility checks
    • Make sure the demo page complies with our accessibility checks before merging
    • Add accessibility to the project goals

    I can take care of the build tools, but I think I'm looking for @kognise and the community's opinion on what level of accessibility we should be complying with.

    help wanted good first issue accessibility 
    opened by kylejrp 17
  • <h1> heading semantics

    heading semantics

    Styling for <h1> headings is currently broken, as all <h1> headings are forced to have the same font size.

    HTML allows you to have multiple <h1> elements on a pageΒΉ, with one being the main site title and the others being nested e.g. inside <article> elements and acting as the main title for the respective article.

    Browsers respect this and display nested <h1> elements smaller than the main one, but water.css breaks this because it forces all <h1> elements to have the same font-size.

        <h1>Main title</h1>
          <h1>Sub title</h1> <!-- Should have same size as <h2> -->

    ΒΉ The Document Outline as intended by HTML5 – but while browsers visually adhere to it by scaling down <h1> elements, they don't implement the Outline algorithm on a semantic level, unfortunately.

    opened by jonaskuske 16

  • Gulp build tools

    Gulp build tools

    I replaced the previous development server with a souped-up gulp build pipeline. Now you're playing with power! 😎


    Gulp replaces the previous compiling of the sass files and also handles the development tools. Gulp has lots of other extensions for things like html templating and minification that the demo page could take advantage of in the future.


    Devtools will now show you the original sass file the rule came from instead of just the full .css file: image

    It will even show you the original Sass file in devtools: image

    Note: this makes the dark.css/light.css look really big in devtools, but that's because it's also downloading the sourcemap file. The actual .css file is still small when using in production.


    You can forget about browser prefixes now - autoprefixer will handle them! I've put a recommended set of supported browsers in the package.json. You can see the coverage here. Feel free to modify! https://browserl.ist/?q=last+1+version%2C+not+dead%2C+%3E+0.2%25

    CSS Minification

    postcss/cssnano are handling css minification. I'm using their "safe" defaults, but they could be tuned even further to provide some even better minification.

    Browser Sync

    This does the live reloading / development environment that you had previously set up with dev.js. However, there's no more server code for you to maintain! This should automatically stream changes to your browser when you have it open. It automatically launches and watches index.html and the sass files when running yarn dev.

    opened by kylejrp 16
  • Publish to npm

    Publish to npm

    It might be nice to have water.css published to npm with every release. Then, users can install it using npm install water.css and include it in their projects without referencing a CDN.

    This would mean we would have to update the package.json version semantically with every release as well.

    opened by kylejrp 13
  • [Blockquotes] Added background and new file for blockquote

    [Blockquotes] Added background and new file for blockquote


    • Making the blockquotes element similar to the other UI elements using border radius 6px and background.
    • Making the _variables file for using elements like spacing, radius and borders to make a consistant UI when using those elements.
    opened by FedeAPerez 12
  • refactor the form section for desktop and mobile view

    refactor the form section for desktop and mobile view

    Improved the styling of the form section of the website both in desktop and mobile view.

    Desktop View

    | Before: | After: | :-------------------------:|:-------------------------: | before-desktop-view | after-desktop-view |

    Mobile View

    | Before: | After: | :-------------------------:|:-------------------------: | before-mobile-view | after-mobile-view |

    opened by japneetbhatia 2
  • feat(radio): change focus ring to match round input

    feat(radio): change focus ring to match round input


    This uses a drop-shadow filter and clip path to create a round focus indicator on radio inputs. Issue #278


    • A box-shadow can only apply square shadows to an element, resulting in a mismatched focus indicator. Screenshot of the original focus state:
    Screen Shot 2022-10-24 at 8 25 59 AM
    • Instead of box-shadow, I used a drop-shadow filter. Drop-shadow filter does not yet support the spread variable that box-shadow has, so we cannot create the unblurred solid 2px shadow that box-shadow allows. Instead, I used 4 layered shadow filters which cover a wide enough area to build the focus indicator. Screenshot of the four layered shadow filters:
    Screen Shot 2022-10-24 at 8 32 05 AM
    • The shadow is then limited to closely match the original 2 pixel solid box shadow spread by creating a circular clip path which slightly overshoots the edge of the component to allow approximately 2 pixels of shadow to show through:
    Screen Shot 2022-10-24 at 8 25 20 AM

    How and where has this been tested?

    • Chrome 106 for macOS
    • Firefox 106 for macOS
    • Safari 16 for macOS


    Screen Shot 2022-10-23 at 3 09 34 PM

    Browser Compatibility

    Although this is compatible with Safari, it is worth noting that an existing issue with the display of radio inputs in Safari results in cropping of the input. This was a pre-existing issue due to the width, height, and font size on the input. I recommend that this be resolved in a separate issue.

    Safari screenshot: water-safari-radio-issue

    Please let me know if any changes are needed and I would be glad to take care of it.

    opened by lunarfusion 1
hello yes i do things, i am the computer person. why do you ask.
πŸ“Ί useless little service to view websites as ascii in the terminal

browscii useless little service to view websites as ascii screenshot in the terminal Usage curl the service and add the site you want to see as url qu

Jen Stehlik 2 Aug 26, 2022
A web component that allows you to run high level programming languages on your websites (static websites included!)

Code-Runner-Web-Component A web component that allows you to run high level programming languages on your website via the public Piston API Show your

Marketing Pipeline 28 Dec 16, 2022
Allow moving/copying/and creation embeds for blocks with drag-n-drop just like Logseq or Roam

Demo Features Drag-n-drop for list items in the same pane and between different panes 3 modes: move block, copy block, embed block Automatic reference

null 92 Dec 26, 2022
Just some burds, jumpin' around in their own little world.

burds! ?? burds! is a weekend hack inspired by this fabulous tweet. It's a little web experiment with tiny animated birds jumping around their tiny li

Linus Lee 60 Dec 1, 2022
Another CSS style library, used for my personal branding and to make websites prettier!

furret.css My personal website styling toolkit, modeled after the lovely Water.css by Kognise. Written to allow quick and beautiful styling for simple

Ray 14 Dec 23, 2022
Less clicking, more creating. Navigate to your favorite actions on the websites you love with just one click.

Navigate to your favorite actions on the websites you love with just one click Web https://irtaza9.github.io/awesome-shortcuts/ Available Shortcuts Go

Irtaza Hussain 9 Aug 25, 2022
It's a set of common utility strategies to work with responsive styles with Flutter and CSS in JS

@skynexui/responsive_stylesheet You don't need to be worried just because you have to support multiple screens ?? ?? ?? ?? It's a set of common utilit

SkynexUI 40 Oct 26, 2022
Convert Tailwind CSS class names into their CSS3-equivalent styles β€”Β right from Alfred.

alfred-tailwind2css Tailwind2CSS offers you the ability to convert TailwindCSS classes into their CSS3-equivalent styles -- right from within Alfred.

Stephan Casas 6 Dec 7, 2022
Make drag-and-drop easier using DropPoint. Drag content without having to open side-by-side windows

Make drag-and-drop easier using DropPoint! DropPoint helps you drag content without having to open side-by-side windows Works on Windows, Linux and Ma

Sudev Suresh Sreedevi 391 Dec 29, 2022
A collection of coding challenges from interviews and websites

coding-challenges All of these folders are challenges that I've make for interviews and from tutorials, now I'll enumerate the ones that are from inte

Matias Salicru 37 Jul 13, 2022
Superkeys allow users to add short keys for websites and make search query in those sites.

Superkeys is a browser extension which allow users to add short keys for websites and make search query in those sites. Made with ❀️ @nilooy ??‍?? Dem

Niloy 9 Aug 17, 2022
πŸ›  Building a Headless CMS with all the essential features for business representative websites to make πŸš€

Isomera - headless CMS for business representative websites SaaS that is hosted on the cloud and built by community. To make developer life easy. ⚠️ A

Cortip 8 Dec 3, 2022
A custom Chakra UI component that adds ready-made styles for rendering remote HTML content.

Chakra UI Prose Prose is a Chakra UI component that adds a ready-made typography styles when rendering remote HTML. Installation yarn add @nikolovlaza

Lazar Nikolov 50 Jan 3, 2023
A less plugin that removes ant-design global styles

less-plugin-remove-antd-global-styles This is a less plugin that removes ant-design global styles. It works well with vite, webpack, rollup and babel-

null 9 Nov 22, 2022
πŸ‘ŒA useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for drop an annoying pop-ups confirming the submission of form in your web apps.

Throw out pop-ups confirming the submission of form! A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for dro

Vic ShΓ³stak 35 Aug 24, 2022
With this plugin, you can easily make a stopwatch or timer on your site. Just init, style and enjoy.

TimezZ With this plugin, you can easily make a stopwatch or timer on your site. Just init, style and enjoy. Features Typescript support Support all en

Valery Strelets 37 Dec 5, 2022
BookStore websites done with JavaScript-ES6, CSS, HTML

Awesome Books This project allows users to add/remove books from a list. This is done by using JavaScript class. It has the feature to dynamically mod

Mengstu F. 8 Mar 1, 2022
:iphone: A super lightweight HTML, Sass, CSS, and JavaScript framework for building responsive websites

Responsive Boilerplate A powerful, accessible, developer friendly, framework for building responsive websites Responsive Boilerplate is the developers

ResponsiveBP 845 Dec 22, 2022
Obsidian-Snippet-collection - A collection of snippet to customize obsidian

This repo is a collection of CSS snippets for Obsidian.md. To install them on PC

Mara 110 Dec 22, 2022