# WPDean

> WPDean is a resource hub for web designers and developers, run by Bogdan Sandu. It offers 57 free browser tools (unit converters, CSS generators, color and data converters), a free Tailwind CSS UI kit with 419 copy-paste components, and 500+ guides on web design, CSS, Figma, Tailwind, Bootstrap and WordPress.

All tools and components are free to use. Guides are written or reviewed by Bogdan Sandu, a web designer and front-end developer who has worked with WordPress since 2008.

## About

- [About WPDean](https://wpdean.com/about-wpdean/): who runs the site, published work and how content is made
- [Contact](https://wpdean.com/contact/): contact details
- [Bogdan Sandu](https://wpdean.com/author/bogdan/): author archive

## Free tools

- [All free web design tools](https://wpdean.com/t/): hub page listing every tool by category

### Unit converters

- [PX to CM Converter](https://wpdean.com/t/px-to-cm-converter/): Convert pixels to centimeters and back at screen, print, Retina or 4K DPI.
- [PX to MM Converter](https://wpdean.com/px-to-mm-converter/): Convert pixels to millimeters at 72, 96, 150, 300 or a custom DPI.
- [PX to EM Converter](https://wpdean.com/px-to-em-converter/): Turn fixed pixel values into EM units based on the parent font size.
- [PX to REM Converter](https://wpdean.com/px-to-rem-converter/): Switch between pixels and REM units for responsive CSS sizing.
- [PX to Inches Converter](https://wpdean.com/t/px-to-inches-converter/): Convert pixels to inches and back at any DPI, with a batch mode.
- [PX to PT Converter](https://wpdean.com/t/px-to-pt-converter/): Convert pixels to points for screen (96 dpi) or print (72 dpi).
- [PT to CM Converter](https://wpdean.com/t/pt-to-cm-converter/): Convert typography points to centimeters and centimeters to points.
- [PT to PX Converter](https://wpdean.com/pt-to-px-converter/): Convert typography points to pixels for web type.
- [CM to PX Converter](https://wpdean.com/t/cm-to-px-converter/): Convert centimeters to pixels at 72, 96, 150 or 300 DPI.
- [Inch to PX Converter](https://wpdean.com/inch-to-px-converter/): Convert inches to pixels for accurate digital dimensions.
- [REM to PX Converter](https://wpdean.com/rem-to-px-converter/): Convert REM values back to pixels from your root font size.
- [REM to EM Converter](https://wpdean.com/rem-to-em-converter/): Convert REM to EM for component-level font sizing.
- [EM to PX Converter](https://wpdean.com/em-to-px-converter/): Convert EM values to pixels from a base font size.
- [EM to REM Converter](https://wpdean.com/em-to-rem-converter/): Convert EM to REM to keep CSS units consistent across a site.

### CSS generators

- [CSS Box Shadow Generator](https://wpdean.com/t/css-box-shadow-generator/): Build layered box-shadow CSS with a live preview and presets.
- [CSS Text Shadow Generator](https://wpdean.com/t/css-text-shadow-generator/): Design multi-layer text-shadow effects and export CSS or Tailwind.
- [CSS Border Radius Generator](https://wpdean.com/t/css-border-radius-generator/): Shape corners with elliptical radii, squircle and pill presets.
- [CSS Gradient Backgrounds](https://wpdean.com/t/css-gradient-backgrounds/): 106 copy-ready gradient backgrounds: linear, radial, conic and mesh.
- [CSS Gradient Generator](https://wpdean.com/css-gradient-generator/): Create a gradient, preview it and copy the CSS.
- [CSS Button Generator](https://wpdean.com/css-button-generator/): Style a custom CSS button and copy the code.
- [CSS Clamp Calculator](https://wpdean.com/t/css-clamp-calculator/): Generate fluid clamp() values for font sizes and spacing.
- [CSS Keyframe Animation Generator](https://wpdean.com/t/css-keyframe-animation-generator/): Build @keyframes on a visual timeline, starting from 12 presets.
- [CSS Animation Generator](https://wpdean.com/css-animation-generator/): Set keyframes, duration and easing for a CSS animation.
- [CSS Clip-Path Generator](https://wpdean.com/t/clip-path-generator/): Drag polygon points to build clip-path shapes, with 18 presets.
- [CSS Glassmorphism Generator](https://wpdean.com/t/css-glassmorphism-generator/): Set blur, transparency and saturation for frosted-glass CSS.
- [CSS Loader Generator](https://wpdean.com/t/css-loader-generator/): Pick one of 12 CSS loading animations and set size, color and speed.
- [Glitch Text Generator](https://wpdean.com/t/glitch-text-generator/): Turn text into one of 5 animated CSS glitch effects.
- [SVG Waves Generator](https://wpdean.com/t/svg-waves-generator/): Stack SVG wave layers and export SVG, PNG, React or CSS.
- [CSS Triangle Generator](https://wpdean.com/css-triangle-generator/): Generate CSS-only triangles by size, direction and color.
- [CSS Color Filter Generator](https://wpdean.com/css-color-filter-generator/): Adjust hue, brightness and contrast with CSS filter functions.

### Color tools

- [Color Name Finder](https://wpdean.com/t/color-name-finder/): Upload an image, click a pixel and get the closest named color.
- [Accessible Color Palette Generator](https://wpdean.com/t/accessible-color-palette-generator/): Build a five-color palette from one base color, with WCAG contrast badges.
- [RGB to HEX Converter](https://wpdean.com/t/rgb-hex-converter/): Convert RGB values to a HEX code with a live preview.
- [HEX to RGB Converter](https://wpdean.com/t/hex-to-rgb-converter/): Paste a 3- or 6-digit HEX code and get the rgb() value.
- [RGB to CMYK Converter](https://wpdean.com/t/rgb-to-cmyk-converter/): Convert RGB or HEX colors to CMYK percentages for print.
- [CMYK to RGB Converter](https://wpdean.com/t/cmyk-to-rgb-converter/): Convert CMYK percentages to RGB and HEX for the web.
- [HSL to RGB Converter](https://wpdean.com/t/hsl-to-rgb-converter/): Convert HSL to RGB, RGBA and HEX with sliders.
- [RGB to HSL Converter](https://wpdean.com/t/rgb-to-hsl-converter/): Convert RGB to HSL and copy the hsl(), rgb() or HEX value.

### HTML and Markdown tools

- [HTML Table Generator](https://wpdean.com/t/html-table-generator/): Build a styled HTML table visually or import it from CSV.
- [HTML Form Generator](https://wpdean.com/t/html-form-generator/): Assemble a form from 13 field types and 16 templates.
- [Markdown to HTML Converter](https://wpdean.com/t/markdown-to-html-converter/): Convert Markdown, including GFM tables and task lists, to HTML.
- [Word to HTML Converter](https://wpdean.com/t/word-to-html-converter/): Turn text pasted from Word or Google Docs into clean HTML.
- [HTML to Text Converter](https://wpdean.com/t/html-to-text-converter/): Strip tags and decode entities to get clean plain text.
- [HTML Calculator](https://wpdean.com/html-calculator/): A calculator for quick arithmetic, right in the browser.

### Minifiers and beautifiers

- [HTML Minifier](https://wpdean.com/html-minifier/): Shrink HTML files by removing unneeded whitespace.
- [HTML Beautifier](https://wpdean.com/html-beautifier/): Reformat messy HTML with clean indentation.
- [CSS Minifier](https://wpdean.com/css-minifier/): Compress CSS to cut its file size.
- [CSS Beautifier](https://wpdean.com/css-beautifier/): Reformat minified or messy CSS so it's readable again.
- [JavaScript Minifier](https://wpdean.com/javascript-minifier/): Minify JavaScript to reduce its file size.
- [JSON Minifier](https://wpdean.com/json-minifier/): Remove whitespace from JSON to make it smaller.
- [JSON Beautifier](https://wpdean.com/json-beautifier/): Indent JSON so it's easy to read and debug.

### Data converters

- [HTML Table to CSV Converter](https://wpdean.com/html-table-to-csv-converter/): Extract an HTML table into a CSV file.
- [JSON to CSV Converter](https://wpdean.com/json-to-csv-converter/): Convert JSON arrays into CSV rows.
- [CSV to JSON Converter](https://wpdean.com/csv-to-json-converter/): Turn CSV data into JSON.
- [XML to CSV Converter](https://wpdean.com/xml-to-csv-converter/): Convert XML data to CSV.
- [CSV to XML Converter](https://wpdean.com/csv-to-xml-converter/): Convert CSV files to XML.
- [SQL to CSV Converter](https://wpdean.com/sql-to-csv-converter/): Convert SQL query results into CSV.

## Tailwind CSS UI kit

- [Free Tailwind CSS UI kit](https://wpdean.com/tuikit/): 419 copy-paste Tailwind CSS v3.4 components in 36 categories, with HTML and JSX copy

### Elements

- [Tailwind CSS Buttons](https://wpdean.com/tuikit/buttons.html): 26 components
- [Tailwind CSS Alerts](https://wpdean.com/tuikit/alerts.html): 24 components
- [Tailwind CSS Cards](https://wpdean.com/tuikit/cards.html): 39 components
- [Tailwind CSS Modals](https://wpdean.com/tuikit/modals.html): 19 components
- [Tailwind CSS Tables](https://wpdean.com/tuikit/tables.html): 8 components
- [Tailwind CSS Tabs](https://wpdean.com/tuikit/tabs.html): 8 components
- [Tailwind CSS Toggles](https://wpdean.com/tuikit/toggles.html): 5 components
- [Tailwind CSS Tooltips](https://wpdean.com/tuikit/tooltips.html): 7 components
- [Tailwind CSS Breadcrumbs](https://wpdean.com/tuikit/breadcrumbs.html): 6 components
- [Tailwind CSS Pagination Components](https://wpdean.com/tuikit/pagination.html): 18 components

### Navigation

- [Tailwind CSS Navbars](https://wpdean.com/tuikit/navbars.html): 6 components
- [Tailwind CSS Headers](https://wpdean.com/tuikit/header-sections.html): 15 components
- [Tailwind CSS Sidebars](https://wpdean.com/tuikit/sidebars.html): 5 components
- [Tailwind CSS Footers](https://wpdean.com/tuikit/footers.html): 10 components

### Page sections

- [Tailwind CSS Hero Sections](https://wpdean.com/tuikit/hero-sections.html): 9 components
- [Tailwind CSS CTA Sections](https://wpdean.com/tuikit/call-to-action-sections.html): 17 components
- [Tailwind CSS Feature Sections](https://wpdean.com/tuikit/site-features-sections.html): 13 components
- [Tailwind CSS Pricing Sections](https://wpdean.com/tuikit/pricing-sections.html): 12 components
- [Tailwind CSS Testimonial Sections](https://wpdean.com/tuikit/testimonials-sections.html): 9 components
- [Tailwind CSS Team Sections](https://wpdean.com/tuikit/the-team-sections.html): 12 components
- [Tailwind CSS Stats Sections](https://wpdean.com/tuikit/stats-sections.html): 11 components
- [Tailwind CSS Logo Clouds](https://wpdean.com/tuikit/logo-clouds.html): 6 components
- [Tailwind CSS Portfolio Sections](https://wpdean.com/tuikit/portfolio-sections.html): 13 components
- [Tailwind CSS Blog Sections](https://wpdean.com/tuikit/blog-sections.html): 19 components
- [Tailwind CSS FAQ Sections](https://wpdean.com/tuikit/faq-sections.html): 7 components
- [Tailwind CSS 404 Pages](https://wpdean.com/tuikit/404-pages.html): 5 components

### Forms

- [Tailwind CSS Login Forms](https://wpdean.com/tuikit/login-forms.html): 4 components
- [Tailwind CSS Signup Forms](https://wpdean.com/tuikit/signup-register-forms.html): 5 components
- [Tailwind CSS Forgot Password Forms](https://wpdean.com/tuikit/forgot-password-forms.html): 4 components
- [Tailwind CSS Contact Forms](https://wpdean.com/tuikit/contact-form-sections.html): 14 components
- [Tailwind CSS Search Forms](https://wpdean.com/tuikit/search-forms.html): 13 components
- [Tailwind CSS Newsletter Forms](https://wpdean.com/tuikit/subscription-newsletter-forms.html): 6 components
- [Tailwind CSS Booking Forms](https://wpdean.com/tuikit/booking-reservation-forms.html): 6 components
- [Tailwind CSS Checkout Forms](https://wpdean.com/tuikit/checkout.html): 16 components
- [Tailwind CSS Account Settings Forms](https://wpdean.com/tuikit/profile-account-settings-forms.html): 16 components
- [Tailwind CSS File Upload Forms](https://wpdean.com/tuikit/upload-file-submission-forms.html): 6 components

## Guides

### Web design and CSS fundamentals

- [What Is Web Design and Why Is It Important?](https://wpdean.com/what-is-web-design/)
- [Essential Web Design Principles to Know](https://wpdean.com/web-design-principles/)
- [What is HTML and Why It’s Important?](https://wpdean.com/what-is-html/)
- [What is CSS in Web Design?](https://wpdean.com/what-is-css-in-web-design/)
- [What Is em in CSS? A Beginner's Guide to Units](https://wpdean.com/what-is-em-in-css/)
- [px vs rem: Which to Use for Font Sizes](https://wpdean.com/px-vs-rem/)
- [DPI vs PPI: What's the Difference?](https://wpdean.com/dpi-vs-ppi/)
- [What Is DPI? Complete Guide for Web & Print](https://wpdean.com/what-is-dpi/)
- [What is Responsive Design in Web Design?](https://wpdean.com/what-is-responsive-design-in-web-design/)
- [What Is Mobile-First Design? Key Benefits Explained](https://wpdean.com/what-is-mobile-first-design/)
- [Visual Hierarchy in Web Design and the Contrast Rule You Can't Skip](https://wpdean.com/what-is-visual-hierarchy-in-web-design/)
- [What Is Color Contrast? Enhance Visual Accessibility](https://wpdean.com/what-is-color-contrast/)
- [Accessible Forms: Best Practices for Usability](https://wpdean.com/accessible-forms/)
- [What Is a Design System and Why Use One?](https://wpdean.com/what-is-a-design-system/)
- [What is a Hamburger Menu in UI Design?](https://wpdean.com/what-is-a-hamburger-menu-in-ui-design/)
- [What is Parallax Scrolling in Web Design?](https://wpdean.com/what-is-parallax-scrolling-in-web-design/)
- [What Is Glassmorphism in Modern Web Design?](https://wpdean.com/what-is-glassmorphism/)
- [A Beginner’s Guide to SVG Optimization](https://wpdean.com/svg-optimization/)
- [What Is Three.js? A Beginner’s Guide to 3D on the Web](https://wpdean.com/what-is-three-js/)

### CSS examples and snippets

- [CSS Card Hover Effects: 40 Examples](https://wpdean.com/css-card-hover-effects/)
- [38 Effective CSS Headers Examples You Can Use](https://wpdean.com/css-header/)
- [41 CSS Chat Box Templates To Use Now](https://wpdean.com/css-chat-box/)
- [43 CSS Progress Bars: Design Inspiration](https://wpdean.com/css-progress-bar/)
- [39 Stylish CSS Search Boxes [Design Showcase]](https://wpdean.com/css-search-box/)
- [44 CSS Glassmorphism Examples You Can Actually Use](https://wpdean.com/css-glassmorphism/)
- [42 Unique CSS Cards Examples For You To Use](https://wpdean.com/css-cards/)
- [41 Product Card Designs: Creative Examples To Use](https://wpdean.com/product-card-design/)
- [26 Seamless CSS Page Transitions](https://wpdean.com/css-page-transitions/)
- [CSS Button Hover Effects That Are Amazing](https://wpdean.com/css-button-hover-effects/)
- [42 Stunning CSS Animation Examples to Inspire You](https://wpdean.com/css-animation/)
- [28 Awesome CSS Accordion Menus](https://wpdean.com/css-accordion/)
- [Awesome CSS Tabs You Can Use Yourself](https://wpdean.com/css-tabs/)
- [43 CSS Lists You Can Use On Your Websites](https://wpdean.com/css-lists/)
- [Inspiring CSS Carousels for Modern Websites](https://wpdean.com/css-carousels/)
- [43 CSS Speech Bubble Design Examples](https://wpdean.com/css-speech-bubble/)
- [Creative CSS Dividers: 42 Code Snippets](https://wpdean.com/css-dividers/)
- [40 Interactive CSS Range Slider Examples](https://wpdean.com/css-range-slider/)
- [JavaScript Text Animation: 42 Examples To Check Out](https://wpdean.com/javascript-text-animation/)
- [HTML Calendar Styling with CSS: Awesome Examples](https://wpdean.com/html-calendar/)

### Figma tutorials

- [Figma Free vs Professional: Is the Paid Plan Worth It?](https://wpdean.com/figma-free-vs-professional/)
- [What is Figma Used for? Top Applications](https://wpdean.com/what-is-figma-used-for/)
- [Figma Dev Mode: Everything Developers Need to Know](https://wpdean.com/figma-dev-mode/)
- [How to Prototype in Figma for Interactive Designs](https://wpdean.com/how-to-prototype-in-figma/)
- [How to Cut a Shape in Figma: Simple Editing Guide](https://wpdean.com/how-to-cut-a-shape-in-figma/)
- [How to Round Corners in Figma: Quick Shape Tips](https://wpdean.com/how-to-round-corners-in-figma/)
- [How to Create Variants in Figma: A Designer’s Guide](https://wpdean.com/how-to-create-variants-in-figma/)
- [How to Make a Carousel in Figma](https://wpdean.com/how-to-make-a-carousel-in-figma/)
- [How to Copy Figma Files to Another Account Easily](https://wpdean.com/how-to-copy-figma-files-to-another-account/)
- [How to Download an Image from Figma: Quick Guide](https://wpdean.com/how-to-download-image-from-figma/)
- [How to Export Figma to PDF: A Quick Tutorial](https://wpdean.com/how-to-export-figma-to-pdf/)
- [How to Get Out of Dev Mode in Figma: Easy Steps](https://wpdean.com/how-to-get-out-of-dev-mode-in-figma/)

### Bootstrap and Tailwind examples

- [34 Tailwind Buttons Examples That Could be Yours](https://wpdean.com/tailwind-buttons/)
- [29 Sleek and Functional Tailwind Navbar Examples](https://wpdean.com/tailwind-navbar/)
- [21 Beautiful Tailwind Dropdown Menus](https://wpdean.com/tailwind-dropdown/)
- [23 Exceptional Tailwind Sidebars You Can Download](https://wpdean.com/tailwind-sidebar/)
- [21 Unique Tailwind Sliders You Can Use](https://wpdean.com/tailwind-slider/)
- [23 Stunning Tailwind Tables for Modern Web Design](https://wpdean.com/tailwind-table/)
- [23 Tailwind Progress Bars You Can Actually Use](https://wpdean.com/tailwind-progress-bar/)
- [20 Cool Bootstrap Buttons You Can Use](https://wpdean.com/bootstrap-button/)
- [15 Bootstrap Headers You Can Have](https://wpdean.com/bootstrap-header/)
- [22 Bootstrap Dropdown Templates To Use](https://wpdean.com/bootstrap-dropdown/)
- [13 Bootstrap Animations To Use In Your Website Design](https://wpdean.com/bootstrap-animations/)
- [23 Bootstrap Charts That Just Look Great](https://wpdean.com/bootstrap-charts/)
- [Get These 21 Bootstrap Sidebars For Free](https://wpdean.com/bootstrap-sidebar/)
- [20 Bootstrap Login Forms That Just Look Great](https://wpdean.com/bootstrap-login-form/)
- [18 Bootstrap Search Box Examples For You](https://wpdean.com/bootstrap-search-box/)
- [16 Bootstrap Toggle Switches That Look Great](https://wpdean.com/bootstrap-toggle-switch/)

### WordPress errors

- [How to Fix the nonce_failure Error in WordPress](https://wpdean.com/nonce-errors/)
- [How to Fix the WordPress Fatal Error: Cannot Redeclare](https://wpdean.com/wordpress-fatal-error-cannot-redeclare/)
- [How To Fix The WordPress Fatal Error Call To Undefined Function](https://wpdean.com/wordpress-fatal-error-call-to-undefined-function/)
- [What Is a Parse Error and How to Fix It?](https://wpdean.com/what-is-a-parse-error/)
- [How to Fix WordPress Images Not Showing on Your Site](https://wpdean.com/wordpress-images-not-showing/)
- [How to Fix a 404 Error in Your WordPress Site](https://wpdean.com/how-to-fix-404-error-in-wordpress/)

## Optional

- [Blog](https://wpdean.com/blog/): all articles, newest first
- [Sitemap index](https://wpdean.com/sitemap_index.xml)
- [Tools and UI kit sitemap](https://wpdean.com/t/wpdeant_sitemap.xml)