Design Tools Tools
CSS generators, color tools, and SVG creation
Color Code Converter
Convert between HEX, RGB, and HSL color codes. Use the color picker and real-time preview for intuitive color selection.
Color Picker
Pick colors intuitively using a color wheel and sliders. Get and copy color codes in HEX, RGB, and HSL formats.
Image Color Extractor
Automatically detect dominant colors from an image and generate a color palette. You can also click anywhere on the image to pick individual colors.
Image Average Color Picker
Calculate the average color of an entire image or a selected area. Useful for choosing color schemes or thumbnail background colors.
CSS Gradient Generator
Visually create CSS gradients with drag controls. Supports linear, radial, and conic gradient types with presets.
CSS Box Shadow Generator
Visually create CSS box-shadow with sliders. Supports multiple shadows and inset shadows.
CSS Border Radius Generator
Generate CSS border-radius with individual corner controls. Includes elliptical radius options and popular shape presets.
CSS Text Shadow Generator
Generate CSS text-shadow with live preview. Stack multiple shadows with neon, emboss, and other presets included.
CSS Triangle Generator
Generate CSS triangles using the border property. Supports all 8 directions with customizable size and color.
CSS Clip Path Generator
Visually create CSS clip-path shapes with drag-and-drop. Includes polygon, circle, ellipse, and presets like star and heart.
CSS Glassmorphism Generator
Create frosted glass UI effects with live preview and CSS output. Fine-tune transparency, blur, border, and shadow settings.
CSS Loader Generator
Choose from multiple CSS loading animations and get the code. Customize color, size, and speed for spinners, dots, bars, and more.
CSS Flexbox Generator
Create Flexbox layouts visually and generate CSS code. Adjust all properties with a built-in cheat sheet.
CSS Cubic Bezier Generator
Visually create CSS animation easing curves. Drag handles and preview animations in real time.
Color Shades Generator
Generate light-to-dark shade variations of any color. Adjust the number of steps and export as Tailwind CSS palette.
Color Mixer
Mix two or more colors at specified ratios to create new colors. Compare results across different color spaces like RGB, HSL, and LAB.
Color Palette Generator
Generate color palettes from a base color using color theory. Includes complementary, analogous, triadic, and more color schemes.
Web Font Preview
Preview web fonts from Google Fonts in real time. Compare multiple fonts while adjusting size and color.
HTML Color Names Reference
Browse all 148 HTML/CSS named colors in one place. Search, preview, and copy HEX codes with ease.
CSS Background Pattern Generator
Generate background patterns using pure CSS. Customize stripes, dots, checks, and more with a visual editor.
CSS Scrollbar Generator
Customize CSS scrollbar design with a visual editor. Adjust color, width, border radius, and copy the code directly.
CSS Gradient Text Generator
Generate CSS code to apply gradients to text. Preview colors, direction, and range adjustments in real time.
CSS Checkbox Generator
Create custom CSS checkboxes with a visual editor. Freely customize animations, colors, and shapes.
CSS Toggle Switch Generator
Create custom CSS toggle switches with a visual editor. Adjust size, color, and animation, then export the code.
SVG Blob Generator
Auto-generate organic blob-shaped SVGs. Adjust randomness and complexity for web design decorations.
SVG Pattern Generator
Generate repeatable SVG tile patterns. Customize pattern type, color, and size, then export the code.