CSS & Design
Colour, gradient, shadow and layout generators with live previews and ready-to-copy CSS.
What are CSS and design tools?
CSS and design tools generate ready-to-use code for visual effects — gradients, shadows, rounded corners, flexbox and grid layouts — and help pick accessible colours with converters, palettes and WCAG contrast checks, all with a live preview.
| I want to… | Use this tool |
|---|---|
| Create a CSS gradient | CSS Gradient Generator |
| Check text colour contrast for accessibility | Color Contrast Checker (WCAG) |
| Convert HEX to RGB or HSL | Color Converter (HEX, RGB, HSL, CMYK) |
| Build a colour palette | Color Palette Generator |
| Generate a box shadow | CSS Box Shadow Generator |
Color Converter (HEX, RGB, HSL, CMYK)
Convert colours between HEX, RGB, HSL, HSV and CMYK — paste any CSS colour or name.
Popular
Color Palette Generator
Generate complementary, analogous, triadic, tetradic and monochromatic colour palettes from one colour.
Color Contrast Checker (WCAG)
Check text and background colour contrast against WCAG 2.2 AA and AAA, with a fix suggestion.
Popular
CSS Gradient Generator
Create linear, radial and conic CSS gradients with up to three colours and copy the code.
CSS Box Shadow Generator
Design CSS box shadows with offset, blur, spread, colour, opacity and inset — live preview.
CSS Border Radius Generator
Round each corner of an element and copy the border-radius CSS.
CSS Flexbox Generator
Build flexbox layouts visually: direction, justify, align, wrap and gap with a live preview.
CSS Grid Generator
Create CSS grid layouts with columns, rows, gap and responsive auto-fit — live preview.
CSS Text Shadow Generator
Design CSS text shadows with offset, blur, colour and opacity, previewed on your own text.
CSS Unit Converter (px, rem, em, pt)
Convert between px, rem, em, pt, %, vw, vh, in, cm and mm with your own base font size.
Glassmorphism CSS Generator
Create frosted-glass CSS effects with background blur, transparency and saturation.
Aspect Ratio Calculator
Find the aspect ratio of any size and calculate the missing width or height when resizing.
Color Shades Generator (50–950)
Generate a full 50–950 shade scale from one colour, with CSS variables and Tailwind config.
Color Blindness Simulator
See how an image or colour palette looks with protanopia, deuteranopia, tritanopia and achromatopsia.
CSS Clip-path Generator
Create CSS clip-path shapes — triangles, polygons, stars, arrows, circles — with a live preview.
CSS clamp() Generator (Fluid Typography)
Generate a fluid CSS clamp() value that scales font sizes or spacing smoothly between two screen widths.
Color Name Finder
Find the closest CSS colour name for any hex code, using the perceptual CIEDE2000 colour difference.
Cubic Bezier Generator (CSS Easing)
Build CSS cubic-bezier() easing curves with presets, a curve graph and a live animation preview.
PPI Calculator (Pixel Density & DPI)
Calculate a screen’s pixel density (PPI), dot pitch and physical size, plus the print size of an image at any DPI.
CSS Sprite Generator
Combine icons into one sprite sheet PNG and get the CSS background-position classes for each.
CSS Button Generator
Design CSS buttons with colours, hover state, padding, radius, border and shadow — live preview and code.
CSS Loader & Spinner Generator
Generate pure-CSS loading spinners, dots, bars, pulse and ring animations in your colour and size.
CSS Animation Generator
Create CSS keyframe animations — fade, slide, zoom, bounce, shake, pulse, spin, flip — with live preview.
SVG Wave Generator
Generate smooth, peaked or stepped SVG waves for section dividers — layers, colour, height and randomness.
SVG Blob Generator
Create random organic SVG blob shapes for backgrounds and illustrations, with optional gradients.
CSS Background Pattern Generator
Make pure-CSS background patterns — stripes, dots, grid, checkerboard, zigzag, diagonal lines and more.
Color Mixer
Mix two colours at any ratio and get an even colour scale — in perceptual OKLab or sRGB — with CSS color-mix().
Neumorphism Generator (Soft UI)
Generate soft-UI neumorphism CSS — flat, concave, convex or pressed — with shadows matched to your colour.
CSS Specificity Calculator
Calculate the specificity (a, b, c) of CSS selectors and see which rule wins — supports :is(), :not(), :has() and :where().
SVG Optimizer (Minify SVG)
Shrink SVG files by removing editor metadata, comments, hidden junk and extra decimals — with a live preview.
Type Scale Generator
Create a harmonious typographic scale (major third, perfect fourth, golden ratio…) with CSS variables and fluid clamp() sizes.
CSS Filter Generator
Create CSS filter effects — blur, brightness, contrast, grayscale, hue, sepia, drop-shadow — with a live before/after preview.
CSS Transform Generator
Build CSS transforms — translate, rotate, scale, skew and 3D perspective — with a live preview and copy-ready code.
CSS Scrollbar Generator
Style custom scrollbars for Chrome, Edge, Safari and Firefox — width, colours, hover and rounded thumb — with a live preview.
CSS Toggle Switch Generator
Design accessible on/off toggle switches in pure CSS — size, colours and shape — and copy the HTML and CSS.
Golden Ratio Calculator
Find golden ratio (1.618) proportions for any size, a golden sequence and golden typography line height and width.