Lightweight Cyberpunk CSS Framework for Dark UI – Cybercore.css

Cybercore CSS is a lightweight CSS framework that helps you build futuristic, cyberpunk-inspired user interfaces.

The framework provides modular SCSS imports, customizable CSS variables, and a complete set of neon-styled components inspired by Cyberpunk 2077 and Blade Runner aesthetics.

Features:

• Pure CSS: All animations, effects, and interactions use CSS-only implementations.
• Modular Import:
  You can import the complete framework or select individual component and effect modules.
• CSS Variable Customization: You can override colors, spacing, and glow effects through CSS variables
• Accessibility: The framework detects and respects the prefers-reduced-motion media query. Users who disable animations will see static versions of all components.
• Modern CSS Standards: The framework requires CSS Layers support, container queries, and the color-mix() function.
• Predictable Class Names: Component classes follow consistent naming patterns.
• Mobile-First Responsive: All components scale appropriately across viewport sizes.
• Dark Theme Optimization: The color palette and contrast ratios are specifically designed for dark interfaces.

Use Cases:

• Gaming and Entertainment Websites: The framework creates landing pages, blogs, or community hubs for video games, especially sci-fi or cyberpunk titles.
• Developer and Designer Portfolios: Developers can use this framework to build portfolio sites with a standout, thematic identity.
• Tech and SaaS Dashboards: The dark theme and clear visual hierarchy suit admin panels or data dashboard interfaces.
• Event or Product Launch Pages: The high-energy aesthetic grabs attention for special announcements. Neon borders and glowing text create a sense of excitement and futurism.

Installation:

1. Install the framework through npm to access the full SCSS source and enable modular imports.

# NPM
$ npm install cybercore-css

2. Import specific modules to reduce your CSS bundle size. This approach works with build tools like Webpack, Vite, or Parcel.

// Import only the button component
@use 'cybercore-css/components/buttons';

// Import multiple specific modules
@use 'cybercore-css/components/cards';
@use 'cybercore-css/effects/glitch';
@use 'cybercore-css/utilities/display';

// Import the complete framework
@use 'cybercore-css';

3. For rapid prototyping or static sites, link directly to the compiled CSS from a CDN.

<link rel="stylesheet" href="https://unpkg.com/cybercore-css@latest/dist/cybercore.min.css" />

UI Components:

1. Add UI components to your webpage. Cybercore CSS uses a BEM-like naming convention prefixed with cyber-.

<!-- Primary cyan button (default accent color) -->
<button class="cyber-btn">EXECUTE</button>

<!-- Magenta variant for destructive actions -->
<button class="cyber-btn cyber-btn--magenta">DELETE</button>

<!-- Yellow variant for warning states -->
<button class="cyber-btn cyber-btn--yellow">CAUTION</button>

<!-- Green variant for success confirmations -->
<button class="cyber-btn cyber-btn--green">CONFIRM</button>

<!-- Ghost style with transparent background and border glow -->
<button class="cyber-btn cyber-btn--ghost">CANCEL</button>

<!-- Basic card with header and body sections -->
<div class="cyber-card">
  <div class="cyber-card__header">
    <h3 class="cyber-card__title">SYSTEM STATUS</h3>
  </div>
  <div class="cyber-card__body">
    All systems operational. Network latency: 12ms.
  </div>
</div>

<!-- Email input with validation styling -->
<div class="cyber-field">
  <label class="cyber-field__label">SECURE CHANNEL</label>
  <input type="email" class="cyber-input" placeholder="encrypted@domain.net" />
</div>

<!-- Create retro terminal windows with command prompt styling. -->
<div class="cyber-terminal">
  <!-- Terminal chrome with window controls -->
  <div class="cyber-terminal__chrome">
    <div class="cyber-terminal__dots">
      <!-- Three decorative dots mimicking window controls -->
      <span class="cyber-terminal__dot"></span>
      <span class="cyber-terminal__dot"></span>
      <span class="cyber-terminal__dot"></span>
    </div>
    <span class="cyber-terminal__title">neural_interface.exe</span>
  </div>
  
  <!-- Terminal body with command lines -->
  <div class="cyber-terminal__body">
    <div class="cyber-terminal__line">
      <span class="cyber-terminal__prompt">$</span>
      <span class="cyber-terminal__command">initialize --system</span>
    </div>
    <div class="cyber-terminal__line">
      <span class="cyber-terminal__prompt">></span>
      <span class="cyber-terminal__output">System initialized successfully</span>
    </div>
  </div>
</div>

2. All available UI components:

• Buttons: Standard interactive elements. They support solid neon fills, color variants (magenta, yellow, green), and transparent “ghost” outlines.
• Cards: Flexible content containers. They feature optional holographic shimmers and interactive hover-glow effects.
• Inputs: Form fields for user data. They include styled wrappers for labels and helper text.
• Terminal: A decorative code window. It mimics a command-line interface with window chrome and prompt styling.
• Badges: Small status indicators. They label items or counts with specific neon colors.
• Alerts: Contextual notification boxes. They communicate success, warning, or danger states to the user.
• Tables: Data grids. They present information with cyber-styled borders and spacing.
• Progress: Visual indicators. They show completion status for loading tasks or skills.
• Tabs: Navigation controls. They switch between different content views within a container.
• Modal: Overlay dialogs. They interrupt the user flow for critical actions or messages.
• Spinner: Animated loaders. They indicate active processing or data fetching.
• Skeleton: Placeholder shapes. They simulate content layout while data loads to reduce layout shift.
• Nav: The top-level menu bar. It handles primary site navigation links.

Utilities:

Glitch Text Effect

Apply animated glitch distortion to text elements using a data attribute.

<!-- The data-text attribute must match the inner text exactly -->
<h1 class="cyber-glitch" data-text="MALFUNCTION">MALFUNCTION</h1>

<!-- Glitch effect on a heading with custom content -->
<h2 class="cyber-glitch" data-text="NEURAL LINK ACTIVE">NEURAL LINK ACTIVE</h2>

The glitch effect uses pseudo-elements to create horizontal displacement and color channel separation. The animation triggers continuously by default.

Neon Border Effect

Add glowing borders to any container element with color variants.

<!-- Cyan neon border (default) -->
<div class="cyber-neon-border">
  <p>Content with glowing cyan border</p>
</div>

<!-- Magenta variant border -->
<div class="cyber-neon-border cyber-neon-border--magenta">
  <p>Content with glowing magenta border</p>
</div>

<!-- Yellow variant border -->
<div class="cyber-neon-border cyber-neon-border--yellow">
  <p>Content with glowing yellow border</p>
</div>

Scanline Overlay

Apply a CRT monitor effect with horizontal scanning lines to any element.

<!-- Container with moving scanline effect -->
<div class="cyber-scanlines">
  <h2>INCOMING TRANSMISSION</h2>
  <p>This content appears behind animated scanlines.</p>
</div>

The scanline effect uses a CSS gradient animation to simulate analog display artifacts.

Noise Texture

Add static noise texture as a background overlay.

<!-- Element with subtle noise grain -->
<div class="cyber-noise">
  <p>Content with noise texture applied</p>
</div>

The noise effect uses a repeating SVG pattern to create a film grain aesthetic.

Datastream Animation

Apply an animated light sweep effect across elements.

<!-- Container with moving light beam -->
<div class="cyber-datastream">
  <h3>PROCESSING DATA</h3>
  <p>A light sweep animates across this content.</p>
</div>

Color Utility Classes

Apply accent colors to text elements without custom CSS.

<span class="cyber-text-cyan">Cyan text color</span>
<span class="cyber-text-magenta">Magenta text color</span>
<span class="cyber-text-yellow">Yellow text color</span>
<span class="cyber-text-green">Green text color</span>

Text Glow Effect

Add a glowing shadow to text for emphasis.

<h2 class="cyber-text-glow">This heading glows</h2>
<p class="cyber-text-glow">This paragraph also has a glow effect.</p>

Display Utilities

Control element display properties with utility classes.

<!-- Flexbox container -->
<div class="cyber-d-flex">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Grid container -->
<div class="cyber-d-grid">
  <div>Grid item 1</div>
  <div>Grid item 2</div>
</div>

<!-- Hidden element -->
<div class="cyber-d-none">This content is hidden</div>

Spacing Utilities

Apply margin, padding, and gap spacing with predefined scale values.

<!-- Medium margin on all sides -->
<div class="cyber-m-md">Content with medium margin</div>

<!-- Large padding on all sides -->
<div class="cyber-p-lg">Content with large padding</div>

<!-- Small gap between flex/grid children -->
<div class="cyber-d-flex cyber-gap-sm">
  <div>Item with gap spacing</div>
  <div>Another item</div>
</div>

The spacing scale includes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large).

CSS Variable Customization

Override design tokens by redefining CSS variables in your stylesheet. Place these overrides after the framework import.

:root {
  /* Primary Cyans */
  --cyber-cyan-100: #e0fcff;
  --cyber-cyan-200: #bef8fd;
  --cyber-cyan-300: #87eaf2;
  --cyber-cyan-400: #54d1db;
  --cyber-cyan-500: #00f0ff;
  --cyber-cyan-600: #00c4cc;
  --cyber-cyan-700: #0097a7;
  --cyber-cyan-800: #007a87;
  --cyber-cyan-900: #005d6a;
  
  /* Hot Magentas */
  --cyber-magenta-100: #ffe0f0;
  --cyber-magenta-200: #ffb8d9;
  --cyber-magenta-300: #ff8cc2;
  --cyber-magenta-400: #ff5caa;
  --cyber-magenta-500: #ff2a6d;
  --cyber-magenta-600: #d91a5a;
  --cyber-magenta-700: #b31248;
  --cyber-magenta-800: #8c0b37;
  --cyber-magenta-900: #660527;
  
  /* Electric Yellows */
  --cyber-yellow-100: #fff9db;
  --cyber-yellow-200: #fff3b8;
  --cyber-yellow-300: #ffec8a;
  --cyber-yellow-400: #ffe55c;
  --cyber-yellow-500: #fcee0a;
  --cyber-yellow-600: #d4c908;
  --cyber-yellow-700: #aca406;
  --cyber-yellow-800: #857f04;
  --cyber-yellow-900: #5d5a03;
  
  /* Toxic Greens */
  --cyber-green-100: #d0ffe0;
  --cyber-green-200: #a1ffc1;
  --cyber-green-300: #72ffa2;
  --cyber-green-400: #43ff83;
  --cyber-green-500: #05ffa1;
  --cyber-green-600: #04d485;
  --cyber-green-700: #03a969;
  --cyber-green-800: #027e4d;
  --cyber-green-900: #015331;
  
  /* Void Blacks */
  --cyber-void-100: #2a2d3a;
  --cyber-void-200: #1f2230;
  --cyber-void-300: #181a25;
  --cyber-void-400: #12141d;
  --cyber-void-500: #0d0e14;
  --cyber-void-600: #0a0b10;
  --cyber-void-700: #07080c;
  --cyber-void-800: #040508;
  --cyber-void-900: #010204;
  
  /* Chrome Grays */
  --cyber-chrome-100: #f0f1f5;
  --cyber-chrome-200: #d1d4de;
  --cyber-chrome-300: #b2b7c7;
  --cyber-chrome-400: #939ab0;
  --cyber-chrome-500: #747d99;
  --cyber-chrome-600: #5c647a;
  --cyber-chrome-700: #444b5c;
  --cyber-chrome-800: #2c323d;
  --cyber-chrome-900: #14191f;
  
  /* Semantic Colors */
  --color-bg-primary: var(--cyber-void-500);
  --color-bg-secondary: var(--cyber-void-400);
  --color-bg-tertiary: var(--cyber-void-300);
  --color-bg-elevated: var(--cyber-void-200);
  --color-text-primary: var(--cyber-chrome-100);
  --color-text-secondary: var(--cyber-chrome-300);
  --color-text-muted: var(--cyber-chrome-500);
  --color-border-default: var(--cyber-void-100);
  
  /* Glows */
  --glow-cyan: 0 0 20px var(--cyber-cyan-500),
               0 0 40px color-mix(in srgb, var(--cyber-cyan-500) 50%, transparent),
               0 0 80px color-mix(in srgb, var(--cyber-cyan-500) 25%, transparent);
  --glow-magenta: 0 0 20px var(--cyber-magenta-500),
                  0 0 40px color-mix(in srgb, var(--cyber-magenta-500) 50%, transparent);
  --glow-yellow: 0 0 20px var(--cyber-yellow-500),
                 0 0 40px color-mix(in srgb, var(--cyber-yellow-500) 50%, transparent);
  --glow-green: 0 0 20px var(--cyber-green-500),
                0 0 40px color-mix(in srgb, var(--cyber-green-500) 50%, transparent);
  --glow-text-cyan: 0 0 10px var(--cyber-cyan-500),
                    0 0 20px color-mix(in srgb, var(--cyber-cyan-500) 60%, transparent);
  
  /* Typography */
  --font-display: 'Rajdhani', 'Orbitron', system-ui, sans-serif;
  --font-body: 'Exo 2', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  /* Type Scale */
  --text-xs: clamp(0.64rem, 0.59rem + 0.24vw, 0.75rem);
  --text-sm: clamp(0.8rem, 0.74rem + 0.32vw, 0.94rem);
  --text-base: clamp(1rem, 0.93rem + 0.37vw, 1.18rem);
  --text-lg: clamp(1.25rem, 1.16rem + 0.47vw, 1.47rem);
  --text-xl: clamp(1.56rem, 1.45rem + 0.59vw, 1.84rem);
  --text-2xl: clamp(1.95rem, 1.81rem + 0.74vw, 2.3rem);
  --text-3xl: clamp(2.44rem, 2.26rem + 0.92vw, 2.87rem);
  --text-4xl: clamp(3.05rem, 2.83rem + 1.15vw, 3.58rem);
  --text-5xl: clamp(3.81rem, 3.54rem + 1.44vw, 4.48rem);
  
  /* Spacing */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.09vw, 0.31rem);
  --space-2xs: clamp(0.5rem, 0.46rem + 0.18vw, 0.63rem);
  --space-xs: clamp(0.75rem, 0.7rem + 0.28vw, 0.94rem);
  --space-sm: clamp(1rem, 0.93rem + 0.37vw, 1.25rem);
  --space-md: clamp(1.5rem, 1.39rem + 0.56vw, 1.88rem);
  --space-lg: clamp(2rem, 1.86rem + 0.74vw, 2.5rem);
  --space-xl: clamp(3rem, 2.78rem + 1.11vw, 3.75rem);
  
  /* Borders */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-cyber: 0 12px 0 12px;
  --border-thin: 1px;
  --border-medium: 2px;
  
  /* Animation */
  --ease-cyber: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  
  /* Effects */
  --noise-opacity: 0.03;
  --scanline-opacity: 0.04;
  --chromatic-offset: 2px;
}

Alternatives

• NES.css: A retro 8-bit themed CSS framework with pixel art styling.
• 98.css: Recreates Windows 98 interface components in pure CSS.
• XP.css: Implements Windows XP visual design in CSS. Similar to 98.css.
• Featurastic UI: Cyberpunk Buttons with JavaScript.
• Cyberpunk.css: Create Stunning Cyberpunk 2077 Themed Webpages

The post Lightweight Cyberpunk CSS Framework for Dark UI – Cybercore.css appeared first on CSS Script.