CSS Color Tools
Turn colors into production-ready code — variable scales, framework configs and modern effects.
CSS Variables Generator
Turn any brand color into a complete :root custom-property scale.
SCSS Variables Generator
Generate a full SCSS color variable scale from one brand color.
LESS Variables Generator
Generate LESS color variables and a tonal scale from a base color.
Tailwind Config Generator
Build a tailwind.config.js color scale (100–700) from any HEX color.
Bootstrap Variables Generator
Generate Bootstrap SCSS theme variables from your brand color.
CSS Gradients
Ready-to-copy gradient CSS — jump into the full gradient editor.
Glassmorphism CSS Generator
Frosted-glass card CSS with live blur, opacity and radius controls.
Neumorphism CSS Generator
Soft-UI shadow CSS generated from your surface color.
Box Shadow Generator
Tinted, layered box-shadow utilities from any color.
Border & Gradient Border CSS
Solid and gradient border snippets with adjustable width and radius.
Transparent Color Generator
Every 10% opacity step of your color as RGBA and 8-digit HEX.
RGBA Generator
Convert any color + opacity to a ready-to-paste rgba() value.