503 guides · updated daily

The Empire UI blog

Practical guides on UI styles and effects - every article ships free, working React & Tailwind code.

All UI Styles Components React Tailwind Animation Tools Comparisons Design Systems Advanced

#react #css #tailwind #animation #glassmorphism #next.js #design #performance #accessibility #dark mode #css variables #framer motion #neumorphism #responsive #dashboard #saas #ecommerce #landing page #button #card #form #navigation #typography #gradient #patterns

3 articles · #border · showing 1-3

colorful spinning rainbow gradient border glowing around a dark card element

2026-10-18 · 8 min read

Animated Gradient Border in CSS: Spinning Rainbow Border on Any Element

Learn how to build a spinning animated gradient border in pure CSS using conic-gradient and @keyframes - works on buttons, cards, and any HTML element.

gradient borderanimation

bold black border card designs on bright yellow background showing neobrutalism style

2026-10-15 · 8 min read

Neobrutalism Card Design: Bold Borders, Flat Shadows, Raw Contrast

Learn how to build neobrutalism cards with thick borders, flat offset shadows, and high-contrast palettes - pure CSS, no tricks, just intentional ugliness done right.

neobrutalismcard

geometric CSS border design system token grid layout

2026-09-24 · 8 min read

Border and Outline System: radius, width, style Tokens in CSS

Stop hardcoding border values. Build a token-based border and outline system in CSS that handles radius, width, and style consistently across every component.

borderdesign system

Free components in 41 visual styles

React & Tailwind, copy-paste ready. Glassmorphism, neobrutalism, Y2K and more.

Browse components →