Y2K CSS is a CSS library that brings the nostalgic aesthetics of 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.
It is used for this very website, Creation Wasteland, and is available as an npm package for easy installation.
Simulates retro dithered window effects using 4x4 pixel repeated background svg.
Black to White (dither-black-white-0 to dither-black-white-16):
White to Black (dither-white-black-0 to dither-white-black-16):
Transparent to White (dither-white-alpha-0 to dither-white-alpha-16):
Transparent to Black (dither-black-alpha-0 to dither-black-alpha-16):
dither-black-white-0 to dither-black-white-16dither-white-black-0 to dither-white-black-16dither-white-alpha-0 to dither-white-alpha-16 (transparent to white)dither-black-alpha-0 to dither-black-alpha-16 (transparent to black).retro-shadow-default: Applies a default-sized solid shadow..retro-shadow-sm: Applies a small solid shadow..retro-shadow-xs: Applies an extra-small solid shadow..retro-inverse-shadow-default, .retro-inverse-shadow-sm, .retro-inverse-shadow-xs: Inverse solid shadow versions, typically for dark backgrounds.Applies a dithered shadow. Requires a dither level class (e.g., .dither-8) to set the --shadow-texture.
Default Dithered Shadow (retro-shadow-dither + dither-0 to dither-16):
Small Dithered Shadow (retro-shadow-dither-sm + dither-0 to dither-16):
The original list of classes:
.retro-shadow-dither: Applies a dithered shadow. Requires a dither level class (e.g., .dither-8) to set the --shadow-texture..retro-shadow-dither-sm: Applies a smaller dithered shadow. Requires a dither level class..dither-0 through .dither-16 are provided to set the --shadow-texture CSS custom property for dithered shadows..retro-bevel-outset: Applies an outset border style..retro-bevel-inset: Applies an inset border style.Provides a set of retro-styled buttons with hover and active states. These buttons are designed to evoke the look and feel of early web interfaces.
.retro-button-default: A standard retro-styled button with hover and active states..retro-button-3d: A button with a pseudo-3D gradient effect, including hover and active states..retro-button-stark: A high-contrast button style with hover and active states..retro-input: A retro-styled text input field with focus state.Adds nostalgic animated text effects reminiscent of early web pages and software interfaces.
.retro-loading-text: Creates an animated "Loading..." style text with cycling dots..retro-ticker: A container for horizontally scrolling text..retro-ticker-content: The actual text content that scrolls within the .retro-ticker.Animated loading spinners inspired by early computer interfaces. Each spinner has unique visual characteristics while maintaining the nostalgic aesthetic.
.retro-spinner-primary: A colorful, 8-step animated square spinner..retro-spinner-primary-round: A colorful, 8-step animated round spinner with a glossy overlay..retro-spinner-black: A grayscale, 8-step animated square spinner..retro-spinner-black-round: A grayscale, 8-step animated round spinner with a glossy overlay..retro-spinner-simple: A simpler 8-step animated round spinner with a border and shadow, using a black to white conic gradient.Includes @media (prefers-color-scheme: dark) overrides for dithering patterns (alpha versions), shadows (solid and dithered via --shadow-texture), bevels, buttons, and inputs to ensure they adapt well to dark system themes.
Import the dependency into your project:
npm i y2k-cssTo use Y2K.css, you can include the compiled CSS file in your project.
y2k.css (unminified)Import the css file from the package into your (React/Nextjs/etc.) project:
import "y2k-css/dist/y2k.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>Here are a few things to keep in mind when using Y2K.css:
The .retro-shadow-dither and .retro-shadow-dither-sm classes rely on ::before and ::after pseudo-elements to create the shadow effect. These pseudo-elements cannot be applied to certain types of HTML elements.
These elements are rendered by the browser and do not have a content box that pseudo-elements can be injected into. This includes:
<img><input><textarea><select><video><audio><embed><object><iframe>These elements are self-closing by specification and cannot have any children, including pseudo-elements. This includes:
<br><hr><meta><link><base><area><col><param><source><track><wbr>For these elements, consider wrapping them in a <div> or <span> and applying the dithered shadow class to the wrapper.
The dithered shadow classes (.retro-shadow-dither, .retro-shadow-dither-sm) use a CSS Custom Property --shadow-texture. You must also apply one of the .dither-0 through .dither-16 utility classes to the same element (or an ancestor) to define this property and set the desired dither pattern for the shadow.
box-sizingSome components, like buttons, explicitly set box-sizing: content-box; to achieve their specific retro look with padding and borders. If you have a global box-sizing: border-box; rule, this might lead to slightly different sizing than intended for these specific components. This is generally handled correctly by the library's styles but is worth noting if you encounter layout surprises.
This project is licensed under the MIT License. You can view the full license on opensource.org.