CSS & Design Toolkit

CSS & Design

CSS gradient generator, box shadow builder, border radius preview, flexbox generator, color picker, and color palette generator.

Type

Angle: 90°

Color 1

Color 2

Color 3 (optional)

CSS Code

background: linear-gradient(90deg, #6366f1, #ec4899);

#gradient#box shadow#border radius#flexbox#color picker#color palette#css

What's included in CSS & Design Toolkit

6 tools, all free and client-side — no login or data upload required.

CSS Gradient Generator

Create linear and radial CSS gradients with a visual editor — adjust colors, angle, and stops with live preview.

Design hero section backgrounds with gradients
Create subtle card and button gradient effects
Generate cross-browser gradient CSS without memorizing syntax

Box Shadow Generator

Build CSS box-shadow effects visually with controls for X/Y offset, blur, spread, color, and inset mode.

Design card and panel elevation effects
Create neumorphism-style inset shadows
Generate multi-layer shadow effects visually

Border Radius Generator

Set individual corner radius values and preview the resulting CSS border-radius with live shape preview.

Create blob shapes with asymmetric border radii
Design pill-shaped buttons and tags
Prototype card and modal corner styles

Flexbox Generator

Visually configure all CSS flexbox properties — direction, wrap, justify-content, align-items — and copy the generated CSS.

Learn flexbox by experimenting with live layout
Generate flex container CSS for common layouts
Debug flex alignment and spacing issues visually

Color Picker

Pick any color from a wheel or enter values and instantly get HEX, RGB, HSL, and CMYK representations.

Convert design colors between formats for CSS and print
Pick accessible color combinations for UI design
Extract color values from design specifications

Color Palette Generator

Generate a complete palette of shades (darker) and tints (lighter) from any base color for design systems.

Build a color scale for a design system or Tailwind config
Generate accessible light and dark variants of brand colors
Create consistent color ramps for data visualization

About CSS & Design Toolkit

The CSS & Design Toolkit replaces half the tabs in your browser with one visual interface. Build linear and radial gradients with live color stops, craft multi-layer box shadows for realistic card elevation, design asymmetric border radii for blob shapes, and experiment with every flexbox property until the layout looks right — then copy the generated CSS.

The Color Picker converts between HEX, RGB, HSL, and CMYK instantly, and the Palette Generator produces a full scale of shades and tints from any base color, ready to drop into a Tailwind config or design system. Every generator produces cross-browser-compatible CSS with the minimum set of vendor prefixes needed.

No data is uploaded or tracked. The tools work offline once loaded, which makes them convenient for airplane use and secure client work.

How to use CSS & Design Toolkit

1
Pick a generator
Choose a tab: Gradient, Box Shadow, Border Radius, Flexbox, Color Picker, or Palette Generator.
2
Manipulate the visual editor
Drag sliders, click color swatches, and toggle options. The preview pane updates live, and the generated CSS appears below.
3
Fine-tune numeric values
For precision, type values directly into the numeric inputs — gradient stops, shadow offsets, radius corners, and flex ratios all accept exact numbers.
4
Copy the CSS
Click copy to send the generated rule to your clipboard, ready to paste into a stylesheet or CSS-in-JS block.

Frequently asked questions

Does the Gradient Generator support conic gradients?

The current version supports linear and radial gradients, which cover the overwhelming majority of real-world use cases. Conic gradient support is planned for a future release.

Can I create neumorphism effects with the Box Shadow Generator?

Yes. Add two shadow layers — one light (usually white or off-white) and one dark — with opposite offsets, and enable the inset toggle on the darker layer for the classic soft, extruded neumorphism look.

Does the Color Picker support WCAG contrast checking?

The picker itself converts between color formats. For contrast checking, copy two colors into a WCAG contrast tool. Contrast checking is on the roadmap.

What color scale does the Palette Generator produce?

It generates 11 shades per palette (50, 100, 200 … 900, 950), matching the Tailwind CSS scale convention. Each step is interpolated in HSL space so perceived lightness changes linearly.

Can I generate flexbox layouts for specific patterns like a holy grail?

The Flexbox Generator exposes direction, wrap, justify-content, align-items, and align-content. Common patterns like header/sidebar/content/footer (holy grail), centered modal, and responsive nav bar can all be produced by setting these properties on a container.

Does the Border Radius Generator output the four-value shorthand?

Yes. When all four corners are equal you get border-radius: 12px; when they differ you get the full shorthand border-radius: 10px 20px 30px 40px; or the slash form border-radius: 50% 20% / 20% 50%; for elliptical corners.