Experience the world of tomorrow on your website with the help of cyberpunk.css, a pure CSS library providing Cyberpunk 2077 themed elements.
.bg-* class for background colors and
.fg-* for text colors.
.ac-* is for the accent color of specific elements such as
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:
See code examples below to create custom inputs.
Use for example
.cyber-input-full for even bigger input fields. Add the
.ac-* classes to change the accent color of the input fields.
Works also with other textfield-like input types such as password, number, date,...
Example code for buttons:
You can remove the element with the
.glitchtext class to remove the hover effect. Use
bg-* for coloring.
General purpose containers for text and/or images.
<code> tags or class
.code to show inline code examples like this one here.
Use the following html to show blocks of code:
FontsCyberpunk CSS also provides three fonts which fit the theme:
BlenderProBookIs the default font which is used for the whole page.
OxaniumIs the font used in
.code-blocks. To use this font, you can apply the
.oxanium-font class to desired elements.
CyberpunkIs 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
.cyber-h to apply styles to your headings.
Can be used with
<h*> but also with other elements like
<div>. All elements will be displayed as a block level element.
Heading h6A normal
.cyber-table class your
<table> element. Use the
.ac-* class for accent colors.
|Provides a rule-based rewriting engine to rewrite requested URLs on the fly
|RFC 2616 compliant HTTP caching filter. Not to be confused with mod_cache_disk.
|Strong cryptography using the Secure Sockets Layer (SSL) and Transport Layer Security (TLS) protocols
Glitch effectsCyberpunk CSS provides a set of glitching effects which fit the theme. Use the classes
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.
Good for images. Effect of a flickering screen. Sometimes bright, sometimes dark.
Good for images. Little shakes first, then distorting/breaking effect by rotating and inverting colors.
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.
Good for text. Especially small parts like dots or underlines. Steady blinking.
Good for text. Blinking with different pauses in between.
Show "razor" shaped borders at the top and bottom of your containers by adding the
<section> as well as page headers or footer like here. The razor border takes up 30px of space.
<div> with some sharp edges at the top now.
Colorfull banner for important messages.
You can use
.bg-purple to change the primary color of the gradient. Cyan is the default.