Projects · CSS library

Y2K CSS Released

Dithering, hard shadows, bevels and other 1990s web styling as plain CSS classes. This site is built with it.

What is Y2K CSS?

Y2K CSS is a CSS library that brings the nostalgic aesthetics of the 1990s to modern web development. It features SVG based dithering, retro shadows, and a variety of styles that evoke the early days of the internet. The library is designed to be easy to use and integrate into your projects, allowing you to quickly add a touch of Y2K flair to your web applications. It is a work in progress with new styles being added regularly, and is available as an npm package.

Installation

Using npm

Import the dependency into your project:

npm i y2k-css

Old-school (HTML/CSS)

Include the compiled CSS file in your project: y2k.css (unminified) ↗

Usage

Using npm

Import the css file from the package into your (React/Next.js/etc.) project:

import "y2k-css/dist/y2k.css";

Old-school (HTML/CSS)

Link the dist/y2k.css file in your HTML:

<link rel="stylesheet" href="path/to/dist/y2k.css">

Then apply the classes to your HTML elements:

<div class="dither-black-white-8 retro-shadow-default retro-bevel-outset">
  Y2K Styled Content
</div>

License

MIT. You can view the full license on opensource.org ↗.

Dithering patterns

Simulates retro dithered window effects using 4×4 pixel repeated background SVGs. Low numbers are dense, high numbers are sparse.

• dither-black-white-0 to dither-black-white-16
• dither-white-black-0 to dither-white-black-16
• dither-white-alpha-0 to dither-white-alpha-16 (transparent to white)
• dither-black-alpha-0 to dither-black-alpha-16 (transparent to black)

The patterns rely on image-rendering: pixelated to stay crisp. If a pattern looks blurry at a fractional zoom, add .dither-smooth to let the browser scale it normally.

Retro shadows

Solid shadows

• .retro-shadow-default: a default-sized solid shadow.
• .retro-shadow-sm: a small solid shadow.
• .retro-shadow-xs: an extra-small solid shadow.
• .retro-inverse-shadow-default, .retro-inverse-shadow-sm, .retro-inverse-shadow-xs: inverse versions for dark backgrounds.

Dithered shadows

Applies a dithered shadow. Requires a dither level class (e.g. .dither-8) to set --shadow-texture.

• .retro-shadow-dither: a dithered shadow; needs a dither level class.
• .retro-shadow-dither-sm: a smaller dithered shadow; needs a dither level class.
• .dither-0 through .dither-16 set the --shadow-texture custom property.

Retro bevels

• .retro-bevel-outset: an outset border style.
• .retro-bevel-inset: an inset border style.

Retro buttons

A set of retro-styled buttons with hover and active states, in the spirit of early interfaces.

• .retro-button-default: a standard retro-styled button.
• .retro-button-3d: a button with a pseudo-3D gradient.
• .retro-button-stark: a high-contrast button.

Retro inputs

• .retro-input: a retro-styled text input with a focus state.

Text effects

Animated text effects reminiscent of early web pages and software interfaces.

• .retro-loading-text: an animated "Loading..." with cycling dots.
• .retro-ticker: a container for horizontally scrolling text.
• .retro-ticker-content: the text that scrolls within .retro-ticker.

Retro spinners

Stepped loading spinners inspired by early computer interfaces.

• .retro-spinner-primary: a colorful, 8-step square spinner.
• .retro-spinner-primary-round: a colorful, 8-step round spinner with a glossy overlay.
• .retro-spinner-black: a grayscale, 8-step square spinner.
• .retro-spinner-black-round: a grayscale, 8-step round spinner with a glossy overlay.
• .retro-spinner-simple: an 8-step round spinner with a border and shadow, using a black-to-white conic gradient.

Dark mode

Includes @media (prefers-color-scheme: dark) overrides for the alpha dithers, shadows (solid and dithered via --shadow-texture), bevels, buttons, and inputs so everything adapts to dark system themes.

Notable items

A few things to keep in mind when using Y2K CSS.

Pseudo-element limitations for dithered shadows

.retro-shadow-dither and .retro-shadow-dither-sm rely on ::before and ::after pseudo-elements, which some elements cannot carry.

Replaced elements

Rendered by the browser without a content box for pseudo-elements:

• <img>
• <input>
• <textarea>
• <select>
• <video>
• <audio>
• <embed>
• <object>
• <iframe>

Void elements

Self-closing by specification, so they cannot have children, including pseudo-elements:

• <br>
• <hr>
• <meta>
• <link>
• <base>
• <area>
• <col>
• <param>
• <source>
• <track>
• <wbr>

For these, wrap the element in a <div> or <span> and put the dithered shadow class on the wrapper.

CSS custom properties for dithered shadows

The dithered shadow classes read a --shadow-texture custom property. Apply one of .dither-0 through .dither-16to the same element (or an ancestor) to define it.

box-sizing

Some components, like buttons, set box-sizing: content-box to get their padding-and-border look. A global border-box rule can make them size slightly differently than intended; the library handles this, but it is worth knowing if a layout surprises you.