🎨 ColourUI by Nafij Rahaman

Design with Colour & Style

ColourUI by Nafij Rahaman (nafijrahaman) — a complete colour toolkit for designers and developers. Interactive colour pickers, palette generators, contrast checkers, and 80+ live UI design-effect demos you can copy instantly.

🎨 Open Colour Picker ✨ View Effects
Glassmorphism Neo Brutalism Neumorphism Clay Morphism Liquid Glass Skeuomorphism Minimalism Aurora UI Cyberpunk Bento Grid + more

Built by nafijrahaman · ui.nafij.me · ui.nafijrahaman.me · nafijrahaman.me

🔬 Colour Tools

Colour Picker Suite

Pick, blend, contrast-check and generate palettes — all in one place.

Colour Picker
#7c6dfa
124
109
250
248°
93%
71%
HEX#7c6dfa
RGBrgb(124,109,250)
HSLhsl(248,93%,71%)
Palette Generator
Base colour

Click any swatch to copy its HEX code.

Gradient Maker
135°
background: linear-gradient(135deg, #7c6dfa, #fa6d9a);
Contrast Checker
Sample Text Aa The quick brown fox jumps over the lazy dog.
— Ratio
— WCAG AA
— WCAG AAA
✨ Design Effects

UI Design Styles Showcase

Live demos of popular UI design effects. Hover each card for details and copy the style name instantly.

Glassmorphism
Glass Card

Glassmorphism

Frosted-glass surfaces with backdrop-filter: blur(), translucent backgrounds and subtle borders.

2020s
Skeuomorphism

Skeuomorphism

Designs that mimic real-world textures and materials — wood grain, leather, stitching and deep shadows.

2000s – 2013
Neo Brutalism
NEO BRUTALISM

Neo Brutalism

Raw, bold layouts with thick black borders, hard shadows, high-contrast colours and no-nonsense typography.

2022+
Clay Morphism
Clay

Clay Morphism

Soft, inflated 3-D-looking shapes with multi-directional box shadows and pastel gradients.

2022+
Minimalism
Title Short, clean content with generous white space and muted tones.

Minimalism

Strip away all excess — only essential content, whitespace and a restrained palette remain.

Timeless
Liquid Glass
Liquid Glass

Liquid Glass

Animated fluid blobs under frosted glass — Apple's 2025 design language that merged motion, blur and transparency.

2025
Neumorphism
Neuo

Neumorphism

Extruded elements from a solid background using opposing light and dark shadows — a soft, tactile aesthetic.

2020
Material Design

Material Design

Google's design system based on physical material metaphors — elevation layers, ripples and bold colours.

2014 – present
Flat Design
🔔
Notification 2 new messages

Flat Design

2-D icons, vibrant solid colours and no gradients or shadows — clean, modern and print-ready.

2012 – present
Dark Mode UI
Dark Mode
Reduced eye strain in low-light environments.
Active

Dark Mode UI

Dark surfaces with carefully chosen contrast — reduces glare and creates an immersive premium feel.

2018 – present
Gradient UI
Gradient UI Rich colour transitions elevate depth.

Gradient UI

Smooth colour transitions used as backgrounds, text fills and borders to create rich, vibrant interfaces.

2018 – present
Retro / Pixel Art
> SYSTEM READY_
> COLOR.EXE
> █████ 100%

Retro / Pixel Art

Monochrome phosphor glows, monospace fonts and scanline aesthetics inspired by 80s CRT terminals.

Nostalgic
Aurora UI
Aurora Borealis

Aurora UI

Animated northern-lights gradients — smooth blobs of teal, purple and cyan that shift like a living canvas.

2023+
Bento Grid
Featured
Card A
Card B

Bento Grid

Asymmetric CSS Grid layouts inspired by Japanese bento boxes — varying tile sizes for visual hierarchy.

2023+
Cyberpunk
⟨ CYBER_2077 ⟩

Cyberpunk

Neon glows on dark backgrounds, angular shapes, magenta & cyan accents and glitch-text effects.

Sci-Fi
Claymation 3D

Claymation 3D

Animated organic blob shapes with inset highlight shadows — creates playful, tactile clay-like 3-D objects purely in CSS.

Playful
Mesh Gradient
Mesh Gradient

Mesh Gradient

Organic multi-point gradients that drift subtly, giving depth without hard edges or banding.

2024+
Holographic Foil

Holographic Foil

Iridescent conic gradients with shifting highlights that feel like shiny sticker foil.

Shimmer
Paper Cut
Paper Cut

Paper Cut

Layered cardstock look using warm neutrals, inset panels and soft drop shadows for tactile depth.

Editorial
Isometric UI

Isometric UI

3D-tilted cards rendered with perspective for dashboard illustrations and playful product shots.

3D
Chrome Shine
Chrome

Chrome Shine

High-gloss metallic plate with a sweeping light streak for luxury dashboards and hero buttons.

Premium
Marble Luxe

Marble Luxe

Subtle stone veining on ivory surfaces to give premium editorial and fintech UIs a tactile base.

Luxe
Velvet Bloom
Velvet

Velvet Bloom

Deep jewel-toned fabric feel with plush inset lighting for luxury product or media cards.

Lounge
Prismatic Halo

Prismatic Halo

Layered conic glows spinning around a core, ideal for premium loaders or sci-fi hero badges.

Futurist
Dynamic Color
Material You
Primary
Surface
Accent

Dynamic Color

Seed-based palettes that recolor UI surfaces and chips automatically, inspired by Material You.

Android
iOS Frosted Dock

iOS Frosted Dock

Blurred translucent shelf with vibrant rounded icons, echoing native iOS home-screen glass.

Cupertino
React Native Elevation
RN Card
Touchable opacity + Android elevation shadow.

React Native Elevation

Cross-platform card styling with layered shadows and a hover ripple hinting at press states.

Hybrid
Parallax Hero
Parallax Hero Layered gradients drifting softly for motion-rich headers.

Parallax Hero

Multi-layer gradient blobs that move at different speeds to create depth in landing page heroes.

Motion
Neon Glow
Glow Trail

Neon Glow Trail

Electric gradient pill with a sweeping highlight that sells motion and nightlife energy.

Glow
Glass Orb

Glass Orb

Spherical glass with layered highlights and coloured caustics for premium hero badges.

Luxe
Fiber Optic
Fiber Optic

Fiber Optic Grid

Techno grid with softly pulsing colour fields to suggest data flow and networks.

Tech
Cinematic DOF
Cinematic Depth-of-field style bokeh blooms for dramatic hero areas.

Cinematic DOF

Layered blurred lights that mimic camera depth-of-field, great for hero overlays and headers.

Film
Gold Foil Stamp
Foil

Gold Foil Stamp

Embossed gold sheen on a dark card for ultra-premium product or fintech hero tiles.

Luxury
Anodized Metal
Anodized

Anodized Metal

Directional metallic streak with deep blues and steel edges for hardware-inspired UIs.

Hardware
E-Ink Paper
E-Ink
Paper-like UI for calm reading apps.

E-Ink Paper

Low-contrast, warm paper card that mimics e-readers for distraction-free layouts.

Calm
Silk Ribbon
Silk

Silk Ribbon

Flowing iridescent ribbon with a glint overlay, perfect for CTA strips and section headers.

Elegant
Frosted Acrylic
Acrylic Panel
Windows 11-style translucent blur with noise overlay.

Frosted Acrylic

Translucent acrylic panels with noise texture, saturation boost and deep blur — straight from Fluent Design.

Microsoft
Liquid Metal

Liquid Metal

Mercury-like metallic blob that morphs shape with chrome reflections and inset lighting.

Premium
Morphing Gradient

Morphing Gradient

Animated gradient blob that continuously shifts shape and cycles through vivid colour stops.

2024+
Noise Texture
Grain Surface
Organic warmth through subtle SVG noise overlays.

Noise Texture

Subtle grain and noise overlays on coloured surfaces that add organic warmth and tactile depth.

Texture
Cosmic Nebula
Nebula

Cosmic Nebula

Deep-space nebula with swirling purple and blue gas clouds, twinkling star particles and soft glow.

Sci-Fi
Watercolor Wash
Watercolor

Watercolor Wash

Soft watercolour paint bleeding with semi-transparent layered washes and gentle drifting motion.

Artistic
Glitch Effect
GLITCH

Glitch Effect

Digital glitch with RGB colour-channel splitting, CRT scanlines and jittering text distortion.

Cyber
Diamond Facet

Diamond Facet

Multi-faceted diamond with rotating conic prismatic reflections and light flash overlay.

Luxury
Ember Glow
Ember

Ember Glow

Smouldering ember particles rising with warm orange-red radial glow and pulsing heat core.

Warm
Frost Crystal
❄❄❄
Frost Panel
Ice crystal formation with frosted glass edges.

Frost Crystal

Ice-crystal formation with cold blue tones, frosted glass edges and delicate snowflake accents.

Winter
Chromatic Aberration
PRISM

Chromatic Aberration

RGB colour-channel splitting on text with independent offset animations for a lens-distortion look.

Optical
Smoke Wisp
Smoke

Smoke Wisp

Ethereal smoke tendrils rising with soft gaussian blur, fading opacity and gentle drift.

Ethereal
Stained Glass

Stained Glass

Colourful mosaic panels with lead-line borders and a wandering light-through glow effect.

Cathedral
Quantum Dot

Quantum Dot

Vibrant quantum-dot display grid with pure saturated colour blocks, staggered pulse and glow.

Display
51
FRONT
BACK

3D Card Flip

Perspective card that continuously flips showing front/back faces with smooth 3D rotation.

3D
52

3D Parallax Layers

Multiple translucent layers at different Z-depths creating immersive parallax depth effect.

3D
53

Glassmorphism 2.0

Advanced frosted glass with colored edge refraction glow and backdrop blur effects.

Figma
54

Bento Grid

Animated bento box grid layout with varying cell sizes and staggered scale animations.

Trending
55

3D Isometric Tiles

Isometric perspective grid with animated tile lifting in 3D space at 45-degree angles.

3D
56

Neumorphism Pro

Soft UI with animated inner/outer shadow depth transitions creating tactile surface feel.

Figma
57
3D

3D Floating Text

Bold text with perspective transform and layered 3D shadow extrusion creating depth.

3D
58

Mesh Gradient

Multi-point color mesh gradient that morphs using radial gradients in Figma style.

Figma
59
F
B
R
L
T
B

3D Cube Rotate

Spinning 3D cube with colored faces using preserve-3d transform style and perspective.

3D
60

Claymorphism

Clay-like soft rounded 3D buttons and shapes with inner shadows for tactile appearance.

Trending
61

Aurora Borealis

Northern lights flowing color bands with ethereal gradients moving across dark sky.

Premium
62

Holo Foil

Holographic rainbow foil card with angle shift creating iridescent spectrum effect.

Premium
63

3D Sphere

Pure CSS sphere with radial gradient shading and shadow rotation in 3D space.

3D
64

Retro Pixel Grid

Pixel art grid animation with color-cycling cells creating nostalgic 8-bit display.

Retro
65

Figma Variants

Component variant morphing animation with shape transitions between states.

Figma
66
E

3D Text Extrude

Text with extruded 3D shadow layers creating dramatic dimensional typography.

3D
67

AI Neural Glow

Neural network node connections with pulsing glow simulating AI brain activity.

AI
68

3D Ring Spinner

Concentric 3D spinning rings at different angles creating mesmerizing orbital motion.

3D
69

Grain Film

Animated film grain overlay creating authentic analog photography texture effect.

Texture
70

Figma Blur Vignette

Radial blur vignette with color-shifting center creating depth-of-field focus effect.

Figma
71

3D Pyramid

CSS pyramid with 4 triangular faces rotating in 3D space with perspective depth.

3D
72

3D Torus Illusion

Layered circles creating torus/donut illusion with 3D rotation and depth.

3D
73

3D Stacked Cards

Stack of cards fanning out with perspective and staggered transform animations.

3D
74

3D Wave Grid

Grid of bars animating in sine wave pattern creating 3D surface motion.

3D
75

3D Morphing Cube

Cube that morphs between shapes - cube to sphere to diamond with rotation.

3D
76

3D Flip Gallery

Multiple panels flipping sequentially like a departure board with 3D rotation.

3D
77

3D Helix DNA

Double helix DNA strand rotating with connected base pairs in 3D space.

3D
78
D
D
D

3D Layered Depth

Text/shapes at different Z-depths creating dramatic depth perspective effect.

3D
79

3D Prism Refract

Triangular prism with rainbow refraction effect and light dispersion.

3D
80

3D Orbit System

Orbiting spheres around a center point like a solar system in 3D space.

3D
About ColourUI

Built for Designers

ColourUI is a free, open-source colour and design-effects reference built by Nafij Rahaman (nafijrahaman) to help designers explore colours, generate palettes, verify WCAG contrast ratios and discover the language of modern UI design trends — all without leaving the browser.

80+
Design Effects
4
Colour Tools
6
Palette Schemes