Colors, gradients, shadows and more for designers. · 34 tools
Create harmonious color palettes.
Design CSS gradients and copy the code.
Design CSS box-shadows visually.
Convert between HEX, RGB, HSL and more.
Check contrast against WCAG.
Reduce the size of your SVG files.
Design corners and organic shapes with border-radius and copy the CSS.
Frosted glass effect with backdrop-filter, ready to copy.
Soft neumorphic shadows for buttons and cards.
Patterned backgrounds (dots, stripes, hexagons…) in CSS or SVG.
Random organic SVG shapes with gradients for your designs.
Waves to separate sections of your website, as ready-to-use SVG.
Design gradient, outline or 3D buttons and copy the CSS with hover.
Design animation curves and test them live.
Ready-made @keyframes animations: bounce, pulse, shake, fade and more.
Clip elements with CSS shapes: triangles, stars, hexagons and more.
Build CSS grids visually and copy the code.
Try every flexbox property and see the result instantly.
Calculate harmonious heading and text sizes from a ratio.
Convert between pixels, rem, em, pt and vw based on the base size.
See how people with protanopia, deuteranopia or tritanopia see your design.
Pick the color from any part of your screen with one click.
Create initials avatars with gradients as PNG or SVG.
Design a professional signature for Gmail, Outlook and Apple Mail.
Create a typographic logo with your brand and tagline as PNG or SVG.
Random palettes (pastel, vivid, earthy…) with lockable colors.
Find out the name of a HEX or RGB color and its equivalents.
Generate the 50–950 scale of your brand color for Tailwind or CSS variables.
Generate every icon size for iOS, Android and web from one image.
Design business cards and download an A4 sheet ready to print.
Course certificates, awards and diplomas as PDF.
Simple invoices and quotes as PDF with items, VAT and total.
Build your resume with a clean template and download it as PDF.
Turn images into WhatsApp stickers (512 × 512 WEBP) with a white border.
