3D Effects
Neon 3D Effects
Neon 3D for dark interfaces, in three variants. The synthwave stage is an event hero with a striped sunset sun, a glowing…
73 sets, each in CSS, Bootstrap 5 and Tailwind 4
Every dark set from our UI packs on one page. Each one was designed dark from the start rather than inverted, so surfaces step up in lightness instead of relying on shadows, text and borders are checked against WCAG contrast on the dark background, and focus rings stay visible.
Every set ships in plain CSS, Bootstrap 5 (through --bs-* variables and data-bs-theme) and Tailwind 4, with a live demo and copyable code. Free for personal and commercial use.
Accordions
Dark Accordions
Three accordion treatments for dark interfaces such as dashboards, developer tools and dark-mode sites, with a cyan accent.
Alerts
Dark Alerts and Toasts
Alerts and toasts for dark dashboards and developer tools, where light-theme alerts turn into glaring blocks.
CSS Arrows
Dark Arrow Designs
Arrows for dark dashboards and apps, where thin grey arrows from a light theme tend to vanish.
Background Patterns
Dark Background Patterns
Six patterns tuned for dark interfaces, where a light-theme pattern either vanishes or turns into noise.
Badges & Avatars
Dark Badges and Avatars
Badges and avatars designed for dark interfaces, where light-theme tints turn muddy.
Breadcrumbs
Dark Breadcrumbs
Breadcrumbs tuned for dark interfaces, where a light theme trail turns grey on grey.
Buttons
Neon Glow Buttons
Uppercase outline buttons for dark, gaming and nightlife designs, styled like neon tubes.
Calendars
Dark Event Calendar
A dark month calendar for status pages, release dashboards and night-mode apps.
Cards
Dark Blog Post Cards
Blog post cards for a dark page: a gradient cover with a frosted category chip in the corner, the post title, a…
Carousels
Dark Carousels
Carousels for dark interfaces such as streaming, music and photography sites.
Shopping Carts
Dark Cart & Checkout
A cart and an express checkout for dark storefronts, with a single lime accent on near-black cards.
Chat UI
Dark Chat UI
Two chat interfaces for dark products. Direct messages pairs a dark grey received bubble with a violet-to-blue gradient for your messages, an…
Checkboxes & Radios
Dark Checkboxes & Radios
Checkboxes and radio buttons built for dark surfaces, where a light-theme control loses its border and reads as a smudge.
Claymorphism
Dark Claymorphism UI
The clay kit on a deep indigo night sky. Setting data-clay="dark" on any wrapper swaps every token at once: the page turns…
Clocks
Neon Clocks
Three clocks designed for dark interfaces. The neon readout is a cyan 24-hour time with a two-layer text-shadow glow, for a hero,…
Coming Soon Pages
Dark Neon Coming Soon Page
A dark synthwave coming soon page for an online radio station, and the modern-CSS set in this pack.
Comment Sections
Dark Forum Comments
A forum topic in a dark theme, plus two notices that forums need sooner or later.
Dark UI Kit
Dark UI Buttons & Toggles
The buttons and toggles of the uiCookies dark UI kit. Buttons come as a primary accent button, a secondary button on the…
Dark UI Kit
Dark UI Forms & Login Card
Form controls for the uiCookies dark UI kit and a complete login card.
Dark UI Kit
Dark UI Cards
Cards from the uiCookies dark UI kit, built to show how elevation works without shadows.
Dark UI Kit
Dark UI Navigation
Navigation for the uiCookies dark UI kit. The navbar has a brand mark, main links with the current page marked by aria-current…
Dark UI Kit
Dark UI Overlays & Feedback
Overlays and feedback for the uiCookies dark UI kit. The dialog is a native dialog element for deleting an environment, shown inline…
Dark UI Kit
Dark UI Media & Widgets
Media and data widgets for the uiCookies dark UI kit. The audio player has token-coloured cover art, a show line and episode…
Dark UI Kit
Dark Developer Console
A full developer console dashboard built only from the kit's components, with a working light, dark and system theme toggle.
Dashboard Widgets
Dark Dashboard Widgets
An ops dashboard on a near-black ground, where light-theme greys and blues lose contrast.
Drag and Drop
Dark Drag and Drop Lists
Drag and drop for dark interfaces, where the usual light grey placeholder disappears and focus rings are easy to lose.
Dropdown Menus
Dark Dropdown Menus
Three dropdowns for dark interfaces. Command menu with shortcuts is a Deploy button with a gradient border and glow, whose menu starts…
Feature Sections
Dark Feature Sections
Two feature sections for dark interfaces and developer products.
File Uploads
Dark File Uploads
File upload components for dark interfaces such as developer tools, dashboards and media apps.
Footers
Dark SaaS Footer
A near-black footer for software products. On the left sits the brand with a one-line pitch and a green pill link reading…
Form Wizards
Dark Form Wizards
Two multi-step forms for dark interfaces, with a cyan glow for the current step and lime for finished ones.
Forms
Dark Form Inputs
Form fields tuned for dark interfaces such as developer dashboards and admin panels, with a cyan accent.
Galleries
Dark Photo Portfolio Galleries
Two dark layouts for a photographer's portfolio, where a black ground lets night and landscape photos glow.
Glassmorphism
Dark Glassmorphism Components
The core components of the uiCookies glassmorphism UI kit on the dark scene: buttons, icon buttons and switches, form controls, a stat…
Headers
Dark App Header with Search
The header a dashboard or web app ships with, in a dark theme: a gradient logo mark, product navigation with a highlighted…
Hero Sections
Dark Gradient Hero Sections
Two dark heroes that get their depth from layered gradients rather than images.
Hover Effects
Dark Media Hover Effects
Three hover treatments for dark interfaces, where a drop shadow disappears and light and colour have to do the work.
Image Compare
Dark Photo Editor Comparison
A comparison slider dressed as a photo editor, for photo apps, preset shops and retouching portfolios on a dark interface.
Invoices
Dark Mode Invoices
A dark invoice and a dark invoice card for night-themed apps that still print as a normal light document.
Login Forms
Theme-Aware Login Form
A login card with light and dark themes that follows the operating system until the person picks one.
Maps
Dark Map Styles
Two maps for dark dashboards and apps, drawn as inline SVG. The edge network map shows the world in deep slate with…
Modals
Dark Modals
Three dark-theme dialogs for developer tools and SaaS dashboards: near-black panels with a hairline border, a soft top highlight, a cyan focus…
Multiselects
Dark Multiselect Dropdowns
Selects for dark dashboards and developer tools, where light-theme controls lose their borders.
Music Players
Dark Now Playing Players
Two players for dark streaming-style interfaces. The now playing screen is a phone-width card with the playlist it is playing from, a…
Neumorphism
Dark Neumorphism UI
The same kit on a dark surface, switched by one attribute. Put data-neu="dark" on any wrapper and the shared tokens change to…
Newsletter Forms
Dark Newsletter Signup Forms
Three newsletter sign-ups for dark sites and apps, where a light-theme form loses its contrast.
Notifications
Dark Notification Panels
Notification UI for dark dashboards and developer tools. A bell on a near-black app bar has a red count with a soft…
Pagination
Dark Pagination
Numbered pagination built for dark interfaces such as dashboards, developer tools and media sites.
Pricing Tables
Dark Pricing Tables
Pricing for dark interfaces such as developer tools and hosting dashboards, with colours checked for contrast on a near-black ground.
Product Cards
Dark Product Cards
Product cards for a dark storefront, such as a premium fashion, coffee, grooming or audio shop.
Profile Cards
Dark Profile Cards
Profile cards for dark interfaces such as game, developer and music sites.
Progress Bars
Dark Progress Bars
Progress bars for dark dashboards, developer tools, games and night-mode apps, where a light-theme bar looks flat.
Range Sliders
Dark Range Sliders
Four sliders drawn for dark interfaces, where a light theme slider loses its track against the background.
Retro UI
Synthwave 80s UI Theme
The night variant of the kit: the same buttons, toolbars, fields, windows and widgets with data-retro="synthwave" on a wrapper.
Scroll Animations
Dark Scroll Animations
A dark product page for a night sky camera with five scroll effects and no JavaScript.
Search Bars
Dark Search Bars
Search bars for dark interfaces, where a light-theme field becomes a grey smudge.
Sidebars
Dark Sidebars
Three sidebars for dark interfaces, where light-theme greys turn into mud and focus rings vanish.
Registration Forms
Dark Registration Forms
Two registration forms for dark interfaces such as developer tools and members' communities.
Social Media Icons
Dark Social Media Icons
Social icons designed for near-black interfaces, where icons made for a light page lose contrast.
Speech Bubbles
Dark Speech Bubbles
Speech bubbles for dark interfaces, where a white or pale grey bubble turns into a glaring block.
Star Ratings
Dark Star Ratings
Star ratings tuned for dark interfaces such as streaming apps and media libraries.
Stats Counters
Dark Stats Sections
Stats sections for dark landing pages, where light-theme numbers lose their contrast.
Tables
Dark Service Status Table
A dark admin panel for service health: a header bar with a title and a Refresh button, then a table of services…
Tabs
Dark Dashboard Tabs
A dark card titled Deployments with three underline tabs, Active, Queued and Failed, each followed by a small count pill, and a…
Testimonials
Dark Testimonial Section
Testimonials for a dark developer tool or SaaS site, where a light card on a black page looks out of place.
Timelines
Dark Product Roadmap Timeline
A dark product roadmap that shows status as well as order. Five items run down a thin line: two are Shipped with…
To-Do Lists
Dark To-Do Lists
To-do lists for dark interfaces, with colours checked for contrast on a near-black ground.
Toggles
Dark Mode Toggle Switches
Switches designed for dark interfaces, where a switch made for a light theme loses its edges.
Tooltips
Dark UI Tooltips
Tooltips for dark dashboards, where a black tooltip disappears into a near-black page.
Tree Views
Dark IDE Tree Views
Two dark trees in the style of a code editor's side panel. IDE explorer with git status and indent guides shows an…
Video Players
Dark Streaming Video Players
Two dark players in the style of a streaming app. The streaming player shows the series name and episode title at the…