Cyberpunk.css Example

Download Back To CSSScript.Com

Experience the world of tomorrow on your website with the help of cyberpunk.css, a pure CSS library providing Cyberpunk 2077 themed elements.

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.

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