About

Cyberpunk CSS is a CSS library, which provides Cyberpunk 2077 themed elements for your webpage.
It is not a complete frontend framework like bootstrap. Therefore it does not include structural elements like grid systems, page responsiveness, and so on. I really recommend Metro UI for that.

Getting started

Just include cyberpunk.css in your HTML page.
Make sure to move the ./fonts folder to the same location as cyberpunk.css

This page is an example of what can be achived with this library. Take a look at the source code to check out the details.
Other files like cyber-grid.css, style.css, helper.js from the ./demo folder are not required. They are only used for the basic structural layout of this demo page. However, feel free to use them.

Elements

Colors

Use the .bg-* class for background colors and .fg-* for text colors. .ac-* is for the accent color of specific elements such as .cyber-input or .cyber-check
Most of the following elements are designed to work with these two classes (buttons for example).

Predefined colors from the Cyberpunk 2077 color palette, as well as some standard colors:

-yellow
-cyan
-red
-purple
-blue
-green
-white
-black
-dark

Inputs

See code examples below to create custom inputs.
Use for example .cyber-input-long and .cyber-input-full for even bigger input fields. Add the .ac-* classes to change the accent color of the input fields.

Text input

Works also with other textfield-like input types such as password, number, date,...

Select

Checkbox

Radio Buttons

System Status

Buttons

Example code for buttons:

You can remove the element with the .glitchtext class to remove the hover effect. Use fg-* bg-* for coloring.

Tiles

General purpose containers for text and/or images.

SourceCode();

Use the <code> tags or class .code to show inline code examples like this one here.

Use the following html to show blocks of code:

Fonts

Cyberpunk CSS also provides three fonts which fit the theme:

BlenderProBook

Is the default font which is used for the whole page.
BlenderProBook
42px

Oxanium

Is the font used in <code> and .code-blocks. To use this font, you can apply the .oxanium-font class to desired elements.
Oxanium
42px

Cyberpunk

Is the well known font used in the Cyberpunk 2077 logo.
You should use the .cyberpunk-font class to apply this font to your elements, because it transforms the text for a better look. Use .cyberpunk-font-og for the destinctive yellow/cyan look which comes close to the original logo.

Hint: This font doesnt look good with small font sizes. To recreate the logo you have to do an a few tweaks in CSS. Take a look at the very top of this page for an example
Cyberpunk
42px

Headings

Use class .cyber-h to apply styles to your headings. Can be used with <h*> but also with other elements like <span> or <div>. All elements will be displayed as a block level element.

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6
A normal <span>

Tables

Add the .cyber-table class your <table> element. Use the .ac-* class for accent colors.
There are different styles of tables controlled by the .cyber-style-* classes.

.cyber-table .ac-purple

No. Module Enabled Description
1 mod_rewrite true Provides a rule-based rewriting engine to rewrite requested URLs on the fly
2 mod_cache false RFC 2616 compliant HTTP caching filter. Not to be confused with mod_cache_disk.
3 mod_ssl true Strong cryptography using the Secure Sockets Layer (SSL) and Transport Layer Security (TLS) protocols

.cyber-table .cyber-style-1 .ac-cyan

No. Module Enabled Description
1 mod_rewrite true Provides a rule-based rewriting engine to rewrite requested URLs on the fly
2 mod_cache false RFC 2616 compliant HTTP caching filter. Not to be confused with mod_cache_disk.
3 mod_ssl true Strong cryptography using the Secure Sockets Layer (SSL) and Transport Layer Security (TLS) protocols

.cyber-table .cyber-style-2

No. Module Enabled Description
1 mod_rewrite true Provides a rule-based rewriting engine to rewrite requested URLs on the fly
2 mod_cache false RFC 2616 compliant HTTP caching filter. Not to be confused with mod_cache_disk.
3 mod_ssl true Strong cryptography using the Secure Sockets Layer (SSL) and Transport Layer Security (TLS) protocols

Glitch effects

Cyberpunk CSS provides a set of glitching effects which fit the theme. Use the classes .cyber-glitch-0 to .cyber-glitch-4
They create an impression of instable tech an small errors/glitches in the matrix. Not all effects work well with every element. Some are good for texts, other are good for images or containers.

.cyber-glitch-0

Good for images. Effect of a flickering screen. Sometimes bright, sometimes dark.

.cyber-glitch-1

Good for images. Little shakes first, then distorting/breaking effect by rotating and inverting colors.

.cyber-glitch-2

Good for containers with text. Squeeze effect by removing top an bottom of the element, shake left to right, apply glitchy text-shadow.
If your element uses uses css clip-path, this might not look good. You can try to set the variable --og-clip-path to the clip path of your element, so this animation can revert back to the original state.

.glitch-3

Good for text. Especially small parts like dots or underlines. Steady blinking.

.cyber-glitch-4

Good for text. Blinking with different pauses in between.

Razors

Show "razor" shaped borders at the top and bottom of your containers by adding the .cyber-razor-top and .cyber-razor-bottom classes.
Use bg-* for coloring. Works well with bigger <div> <section> as well as page headers or footer like here. The razor border takes up 30px of space.

This is just a <div> with some sharp edges at the top now.
This is just a <div> with some sharp edges at the bottom.

Banners

Colorfull banner for important messages. Use classes .cyber-banner and cyber-banner-short.
You can use .bg-red, .bg-yellow and .bg-purple to change the primary color of the gradient. Cyan is the default.

.cyber-banner
.cyber-banner-short .bg-purple