CSSFree
CSS Flexbox Generator
Lay out a flex container with real items to watch, and copy only the properties that differ from the browser's defaults.
display: flex; justify-content: space-between; gap: 16px;CSS Flexbox 1 →WordPress 7.1+ Ready345 tools in this category
Design Tools
The decisions behind a design, made explicit: colour you can defend, CSS you would otherwise nudge by hand, and the units a layout rests on.
Tools
TYPEFree
Font Pairing Generator
Fourteen font pairings that work, set in your own words, with the CSS, the theme.json or the link tags to put them on a site.
--font-heading: "Fraunces", Georgia, serif;Google Fonts →CSSFree
CSS Triangle Generator
Draw a triangle with the border trick and with clip-path, side by side, since one is a box that can carry a gradient and the other is not a box at all.
border-bottom: 14px solid #1e56ec;CSS →UNITSFree
CSS Font Size & Unit Converter
Convert one CSS length into every other unit, with the context each relative unit depends on stated rather than assumed.
2rem → 32px · 24pt · 2.5vwCSS Values 4 →CSSFree
CSS Cubic Bezier Easing Generator
Build an easing curve, watch the browser run it, and read what share of the distance is covered at each share of the time. Overshoot is drawn, not clipped.
cubic-bezier(0.34, 1.56, 0.64, 1)CSS →CSSFree
CSS Clip Path Generator
Clip an element to a circle, ellipse, inset or one of twelve polygon presets, in percentages so the shape holds at any size.
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);CSS Masking 1 →COLORFree
Color Contrast Checker (WCAG)
Check two colours against the WCAG contrast thresholds, with the large text rule applied correctly and the nearest passing colour offered.
#1E56EC on #FFFFFF → 5.84:1WCAG 2 →COLORFree
Color Converter (HEX, RGB, HSL, CMYK)
Convert a colour between hex, rgb, hsl, hwb, cmyk and oklch, with a swatch, reading any of those formats as input.
#1e56ec → rgb(30 86 236) · oklch(52.12% 0.2326 264.04)CSS Color 4 →COLORFree
Color Palette Generator
Build a palette from one seed colour: related hues, a tint and shade ramp for each, and the contrast figures that say which stops can carry text.
--color-brand-500: #1e56ec;HSL →CSSFree
CSS Animation Generator
Build a keyframe animation from thirteen presets, replay it as you tune it, and copy CSS that only animates transform and opacity and respects reduced motion.
animation: 400ms cubic-bezier(0.22, 1, 0.36, 1) both slide-up;CSS Animations 1 →Intuitive Workflow
Three steps. Zero onboarding hurdles.
Generate valid, ready-to-paste WordPress code in seconds without configuring a local runtime.
Select your utility
Pick a generator, converter or formatter by category, or search the catalogue by name, hook or function.
Filter by what you need
Configure parameters
Fill in typed fields and toggles; the output updates live and flags invalid values as you type.
Live validation
Copy or download
Get copy-ready PHP snippets, JSON or text, or download a file straight into your project.
Nothing you type is uploaded
Nothing leaves the tab
Your input is never uploaded
Answers as you type
No submit button, no waiting
1-Click exports
Copy, download or share a link
100% Free forever
Built by Pixarlabs for WordPress
Built for scale
Why engineers prefer BucketWP
Clean output that follows WordPress conventions, no bloat, and everything computed in your browser.
100% Client-Side Engine
Tools run in your browser. Database names, prefixes and secret salts you type are never sent to a server.
$ uploaded: 0 bytesWordPress-Style PHP
Generated code uses translatable labels, safely quoted values and the core hooks WordPress expects.
$ add_action( 'init', 'register_book' );Copy, Download or Share
Copy the result, download a ready file, or share a link that restores your settings.
$ download wp-config.php