Neubrutalism CSS
A minimalist, high-contrast CSS library inspired by Brutalist design principles. Bold, clean, and unapologetically simple.
High Contrast
Bold black and white design with striking shadows
Lightweight
No dependencies, pure CSS with minimal footprint
Dark Mode
Built-in dark mode support with easy toggle
Installation
Get started with Neubrutalism CSS in seconds
CDN
Add this to your HTML head:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OshekharO/Neubrutalism@main/neubrutalism.css">Optional: JavaScript
For interactive components (toast, dark mode toggle):
<script src="https://cdn.jsdelivr.net/gh/OshekharO/Neubrutalism@main/neubrutalism.js"></script>Headings
Typography scale for all heading levels
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Display Headings
Display 1
Display 2
Display 3
Display 4
Text Utilities
Common text styling utilities
This is a lead paragraph - larger and emphasized text for introductions.
This is a regular paragraph with bold text, italic text, and links.
This is small text for fine print.
This is muted text for less important content.
Highlight text with marked styling.
Use Ctrl + C to copy.
Blockquote
Design is not just what it looks like and feels like. Design is how it works.
Code Block
function example() {
return "Neubrutalism";
}Dividers
Content above
Content below
Alternative divider with text
Group
Group related elements together
Button Group
Badge Group
Spaced Group
Vertical Group
Badges
Labels and status indicators
Cards
Content containers with various layouts
Card Title
This is a simple card with header and body content.
Card with Image
Cards can contain images and rich content.
Alerts
Contextual feedback messages
Simple Alerts
Tables
Data tables with neubrutalist styling
Standard Table
| Name | Role | Status |
|---|---|---|
| John Doe | Developer | Active |
| Jane Smith | Designer | Active |
| Bob Wilson | Manager | Away |
Scrollable Table
| ID | Name | Role | Department | Location | Status | Actions | |
|---|---|---|---|---|---|---|---|
| 001 | John Doe | john@example.com | Developer | Engineering | New York | Active | |
| 002 | Jane Smith | jane@example.com | Designer | Creative | San Francisco | Active |
Compact Table
| Item | Qty | Price |
|---|---|---|
| Widget A | 5 | $10.00 |
| Widget B | 3 | $15.00 |
| Widget C | 8 | $8.00 |
Borderless Table
| Product | Category | Price |
|---|---|---|
| Laptop | Electronics | $999 |
| Desk Chair | Furniture | $250 |
| Notebook | Office | $5 |
Row Highlights
| Task | Status |
|---|---|
| Deploy to production | Completed |
| Code review pending | In Progress |
| Critical bug fix | Blocked |
| Documentation update | Scheduled |
Progress Bars
Visual progress indicators
Striped & Animated
Spinners & Loaders
Loading indicators
Circle Spinners
Color Variants
Square Spinner
Dots Loader
Tooltips
Contextual information on hover
Hover over these elements: Hover me (top) | Hover me (bottom)
Modals
Dialog windows for user interaction
Accordion
Collapsible content sections
Neubrutalism is a modern CSS design approach that focuses on minimalist, high-contrast, and bold design principles.
Yes! Neubrutalism CSS is completely free and open source under the MIT license.
Neubrutalism CSS supports all modern browsers including Chrome, Firefox, Safari, and Edge.
Tabs
Tabbed content navigation
Standard Tabs
First Tab Content
This is the content for the first tab.
Second Tab Content
This is the content for the second tab.
Third Tab Content
This is the content for the third tab.
Scrollable Tabs
Perfect for many tabs - scroll horizontally to see more.
Overview
Scrollable tabs are perfect when you have many tabs that don't fit on one screen. Users can scroll horizontally to navigate between tabs.
Features
Neubrutalism CSS provides a clean, high-contrast design system with multiple components.
Documentation
Full documentation available at the GitHub repository.
Installation
Include the CSS file via CDN or download directly.
Configuration
Customize using CSS custom properties.
API Reference
All classes and utilities are documented.
Examples
Check the examples folder for starter templates.
FAQ
Frequently asked questions and answers.
Dropdown
Dropdown menus
Pagination
Page navigation controls
- 1
- 2
- 3
- 4
- 5
Lists
Styled list components
Basic List
- List item one
- List item two
- List item three
Ordered List
- First item
- Second item
- Third item
Bullet List
- Bullet item one
- Bullet item two
- Bullet item three
Avatars
User profile images
Skeleton Loaders
Loading placeholders for content
Card Skeleton
Avatar + Text Skeleton
Button Skeleton
Timeline
Chronological display of events
Initial development phase began with core features.
First public beta released for testing.
Official stable release with full documentation.
Upcoming features and improvements.
Steps / Stepper
Multi-step process indicators
Horizontal Steps
Rating
Star rating components
Interactive Rating
Large Rating
Static Rating (Read-only)
Empty State
Placeholder for empty content areas
When you receive messages, they will appear here.
Forms
Form layouts and inputs
Checkboxes
Checkbox styles and variants
Radio Buttons
Radio button styles
Range Slider
Slider input control
Switch Toggle
On/off toggle switches
Input Group
Input with attached buttons
Containers
Content containers with various styles and sizes
Basic Containers with Shadows
Sized Containers
Card-style Container
Color Variants
Light/Dark Containers
Grid System
Responsive grid layouts
3 Column Grid
Bordered Grid
Masonry Grid
Nav Pills
Pill-style navigation tabs
Standard Pills
Square Pills
Color Variants
Small Pills
Large Pills
Pills with Badge
Justified Pills
Vertical Pills
Scrollable Pills
Scroll horizontally to see more pills.
Bordered Pills Container
Colors
Color utility classes
Background Colors
Text Colors
Primary text color
Success text color
Danger text color
Warning text color
Muted text color
Dark Mode
Toggle between light and dark themes
Click the button to switch between light and dark mode. Your preference is saved automatically.
Toast Notifications
Temporary notification messages
Marquee
Scrolling text animation
Carousel
Image slider component
Newsletter
Email subscription form
Thumbnails & Images
Image styling utilities
Testimonials
Customer quotes and reviews
"Neubrutalism CSS has transformed how I approach web design. The bold, high-contrast aesthetic is exactly what I was looking for!" - Happy Developer