QuackyardCSS Gradient Generator
Build linear, radial and conic gradients by eye: drag the colour stops, try a preset and copy the CSS.
Background
background: linear-gradient(135deg, #7c3aed 0%, #db2777 55%, #fb923c 100%);With a solid fallback first
background: #c6518b; background: linear-gradient(135deg, #7c3aed 0%, #db2777 55%, #fb923c 100%);
Presets
Type
Colour stops
Drag a handle, or focus one and press an arrow key.
Colour interpolation
Colours blend in sRGB, the way gradients have always mixed. Every browser reads it.
More in the yard
- ASCII TableEvery ASCII character with its decimal, hex, octal, binary and HTML code, and a lookup for any character.
- Base64 Encoder & DecoderEncode text to Base64 and decode it back, in the standard or URL-safe alphabet, without your text leaving the page.
- Bit FlipFlip bits until the board makes the target number: twelve levels from place values to hex, masks and shifts.
- Box Shadow GeneratorDesign CSS box shadows layer by layer, preview them, and copy the value with a matching Tailwind class.
- Case ConverterConvert text between camelCase, PascalCase, snake_case, kebab-case, Title Case and more, and make a URL slug.
- chmod CalculatorConvert Unix permissions between octal and symbolic notation, special bits included.
- CIDR & Subnet CalculatorWork out what an IPv4 or IPv6 block covers, split it into subnets, and check whether an address is inside it.
- Code TypingA typing test with real code instead of prose: ten snippets in ten languages, brackets, quotes and all.
- Color Converter & Contrast CheckerConvert a colour between HEX, RGB, HSL and OKLCH, and check two colours against WCAG.
- Cron BuilderRead and write cron expressions in plain English, with the next run times in any timezone.
- CSS SelectorsWrite one CSS selector that picks exactly the elements a level highlights, in as few characters as you can.
- CSV ↔ JSON ConverterConvert between CSV and JSON: RFC 4180 quoting, an auto-detected delimiter, typed values, and a preview of the table.
- Data Size ConverterConvert bits, bytes, kB and MB against KiB, MiB and GiB exactly, and time a download.
- Date CalculatorCount the days between two dates, and add or subtract days, weeks, months and years.
- Hash GeneratorHash text with MD5, SHA-1, SHA-256, SHA-384 and SHA-512 at once, and check a hash against it.
- Hex Color GameSee a colour, guess its hex code: ten levels from greys to near-miss pairs, judged by CIEDE2000.
- HMAC GeneratorSign a message with a secret key — HMAC over SHA-256, SHA-512, SHA-1 or MD5 — and check a signature against it.
- HTML Entity Encoder & DecoderEscape text into HTML entities and read them back, named where a name exists and numeric otherwise.
- HTTP Status CodesLook up any HTTP status code: what it means, when to use it, and what clients do with it.
- JSON Formatter & ValidatorFormat, minify and check JSON, and see the exact line and column where it breaks.
- JSON ↔ YAML ConverterConvert between JSON and YAML: anchors resolved, multi-document files handled, and output that round-trips.
- JWT DecoderDecode a JSON Web Token in your browser and read its header, claims and expiry in plain words.
- Lorem Ipsum GeneratorGenerate classic Lorem Ipsum or developer-flavoured filler, by the paragraph, sentence or word.
- Markdown Editor & PreviewWrite Markdown, see it rendered, and copy the HTML.
- MIME Type LookupLook up the MIME type for a file extension, or the extensions for a MIME type.
- Number Base ConverterConvert a number between binary, octal, decimal, hex and any base from 2 to 36, however big it is.
- Password GeneratorMake strong passwords and passphrases from your browser’s own randomness, and check how strong a password is.
- PX to REM ConverterConvert px, rem, em, pt and % in both directions, at any root font size.
- QR Code GeneratorMake a QR code for a link, Wi-Fi, an email or a phone number, and download it as SVG or PNG.
- Regex CrosswordA crossword whose clues are regular expressions: fill the grid so every row and every column matches its pattern.
- Regex TrainerLearn regular expressions one level at a time: match one list, skip the other, in as few characters as you can.
- Robots.txt TesterCheck a robots.txt: would this crawler be allowed to fetch this URL, and which rule decided?
- Semver Range CheckerCheck which versions satisfy an npm semver range, and read what the range means in plain words.
- Shell PipesBuild Unix pipelines that turn a log, a CSV or a word list into the target output, in as few characters as you can.
- SQL DetectiveSolve a yard mystery with SQL: ten levels of queries against a small database, in as few characters as you can.
- SQL FormatterFormat SQL for reading, or minify it, in the dialect you use.
- String Escape & UnescapeEscape and unescape strings for JSON, JavaScript, Java, C#, Python, SQL, regex, the shell and CSV.
- Text to Binary ConverterConvert text to binary, hex, decimal or octal bytes, and back — UTF-8, UTF-16 or ASCII, without leaving the page.
- Diff CheckerCompare two texts line by line, word by word or character by character, and copy the unified diff.
- Time Zone ConverterConvert a date and time between time zones, and see it in several at once.
- Unix Timestamp ConverterTurn Unix timestamps into dates and back, in any timezone.
- URL Encoder & DecoderPercent-encode text for URLs, decode it back, and take a URL apart into its pieces.
- User Agent ParserRead a User-Agent string: browser, engine, operating system, device, and whether it is a known crawler.
- UUID Generator & DecoderGenerate version 4 and 7 UUIDs, or take any UUID apart: its version, its variant, and when a time-based one was made.
- Word CounterCount words, characters, sentences and paragraphs as you type, with reading and speaking time.
- XML Formatter & ValidatorFormat, minify and check XML, and point at the exact spot where it breaks.