Design & CSS Tools.

Good design decisions are not purely instinctive. They are grounded in color theory, typography hierarchy, spatial relationships, and accessibility standards. These tools help designers and front-end developers make those decisions with precision, then translate them directly into production-ready CSS without manual calculation or guesswork.

Color is the foundation of visual design, and the color tools cover every stage of the workflow. The color picker lets you select any hue visually and instantly see the HEX, RGB, HSL, and HSV values. The color converter moves between these formats so you can use whichever notation your codebase, design tool, or style guide prefers. When you need to build a complete palette rather than pick individual colors, the palette generator applies color theory rules, such as complementary, triadic, split-complementary, and analogous relationships, to generate harmonious sets from a single starting color.

Accessibility is not optional. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text to meet AA compliance. The color contrast checker calculates the ratio between any foreground and background color pair and tells you whether you pass AA, AAA, or neither. The color blindness simulator goes further, showing how your design appears to users with deuteranopia, protanopia, tritanopia, and achromatopsia, which affects roughly 8% of men and 0.5% of women.

Layout generation is where these tools save the most time. CSS Grid and Flexbox are the standard layout systems for modern web design, but their syntax is verbose and the mental model takes time to internalize. The Grid generator provides a visual interface where you define columns, rows, gaps, and placement, then outputs the complete CSS. The Flexbox generator does the same for one-dimensional layouts, with real-time preview of how items arrange and wrap. Copy the output and paste it directly into your stylesheet.

Visual effects like gradients, shadows, and glassmorphism are the details that separate polished interfaces from generic ones. The gradient generator supports linear, radial, and conic gradients with multiple color stops, and lets you fine-tune the angle and position of each stop. The box shadow generator handles stacked shadows with individual control over offset, blur, spread, and opacity. The glassmorphism and neumorphism generators produce the specific combinations of background blur, transparency, and shadow that characterise these design trends.

Typography decisions compound across a design system. Choosing the right type scale ensures visual harmony between headings, subheadings, and body text. The typography scale calculator generates a complete set of font sizes based on a scale ratio, such as the Major Third (1.25) or Golden Ratio (1.618), so your sizes maintain consistent mathematical relationships rather than being picked arbitrarily. The font pairing suggester recommends Google Fonts combinations that work well together based on contrast of form, a key principle of effective typographic pairing.

The pixel-art editor, noise generator, and SVG pattern generator round out the toolkit for developers who need custom visual assets without access to a designer or design software. Export patterns as SVG for infinitely scalable backgrounds, or generate noise textures for use as CSS background images.