codipry.

Keyboard shortcuts

Use Ctrl on Windows/Linux or Command on macOS. Shortcuts respect focused text fields.

Ctrl/⌘ K
Open or close tool search
?
Open this reference outside text inputs
Escape
Close the active dialog
Ctrl/⌘ S
Save the current Playground project
Ctrl/⌘ Enter
Run the Playground preview
Tab
Move between controls; inside code typing, insert two spaces
Shift Tab
Move to the previous control

Monaco also provides its own command palette. Browser and operating-system shortcuts can take priority.

Start creating
Frontend PlaygroundcodeResponsive LabcodeGradient GeneratordesignBox Shadow GeneratordesignText Shadow GeneratordesignBorder Radius GeneratordesignFlexbox GeneratordesignCSS Grid GeneratordesignAnimation GeneratordesignGlassmorphism GeneratordesignClip Path GeneratordesignFluid Type GeneratordesignColor StudiodesignGit Command BuildergitGit VisualizergitMerge vs. RebasegitSQL Joins VisualizerdatabaseSQL Clause ExplorerdatabaseDatabase RelationshipsdatabaseSQL FormatterdatabaseSQL PlaygrounddatabaseTyping TestpracticeCode Typing TestpracticeJSON FormattercodeCSV / JSON ConvertercodeText DiffcodeRegex TestercodeEncoding ToolscodeHash GeneratorcodeTimestamp ConvertercodeCSS Transform GeneratordesignCSS Filter GeneratordesignDesign Token ExporterdesignGit Conflict TrainergitSQL Schema Explorerdatabase
Your next idea is a few keystrokes away.Esc to close
A workspace for your curiosity

Less setup.
More “what if?”

Your everyday toolkit to code, design, and experiment. Free tools that run in your browser and keep your work yours.

Start building Explore guides
No signup required100% freePrivate by design
your-next-idea.html● Local preview
‹/› HTML# CSSJS JavaScript
1<section class="possibilities">
2  <h1>Hello, idea.</h1>
3  <p>Let’s make something.</p>
4</section>
5
6<!-- A little code. Endless possibilities. -->
Hello, idea.

Let’s make something.

YOUR BROWSER IS YOUR WORKSPACENo installs. No limits on curiosity. ↗
Browser-first, alwaysYour code stays on your deviceFrom idea to output, fasterBuilt for the way you build
The right tool, right here

Big ideas. Handy little tools.

Skip the busywork. Get straight to the good part.

View all tools

BETA

Frontend Playground

Write HTML, CSS, and JavaScript. See your ideas come to life in an isolated browser preview.

Code / Workspace
BETA

Gradient Generator

Blend colors into linear, radial, and conic gradients with ready-to-use CSS.

Design / Generator
BETA

Git Command Builder

Build Git commands with clear explanations, shell quoting, and safety warnings.

Git / Workspace
BETA

Box Shadow Generator

Build layered shadows with precise control over color, blur, spread, and position.

Design / Generator
BETA

SQL Joins Visualizer

See which rows match in INNER, LEFT, RIGHT, FULL, and CROSS joins.

Database / Workspace
BETA

Typing Test

Measure speed and accuracy, spot mistakes, and build a consistent typing habit.

Practice / Practice

A growing collection of tools. One place to make things happen.

Make something beautiful.CSS / Gradient
A little color goes a long way.
135° · LINEAR GRADIENT
background: linear-gradient(135deg,
  #4164ef, #af7aeb 55%, #efbad4);
A little tweak. A big difference.

Find your “that’s it”
a little faster.

Turn the idea in your head into something you can see. Adjust, experiment, and take the code with you.

See every change as you make itClean CSS, ready for your projectRoom to try something unexpected
Explore CSS Studio
Made to stay out of your way

Your tools. Your flow. Your data.

A small toolkit with a few big principles.

Private is the default.

Your code lives on your device. No accounts, no cloud databases, and no one looking over your shoulder.

A browser is all you need.

Nothing to install before your first experiment. Browser-based tools keep the distance between an idea and a result short.

Free to get carried away.

No credit card. No daily limits. Explore a new concept, make a happy accident, and come back whenever you like.

A little understanding goes a long way

Read. Try. Make it yours.

All guides
6 min · Practical guide

Build a grid without guessing

Start with content, choose tracks, and make a layout that survives a narrow viewport.

Read and experiment ↗5 min · Practical guide

Give shadows a job to do

Use contact and ambient layers to separate surfaces without a muddy halo.

Read and experiment ↗7 min · Practical guide

Choose merge or rebase deliberately

Understand which parent links and commit IDs change before rewriting a branch.

Read and experiment ↗

Fresh from the workshop

Frontend PlaygroundAdded 2026-11-08Responsive LabAdded 2026-11-08Gradient GeneratorAdded 2026-11-08Box Shadow GeneratorAdded 2026-11-08See what changed ↗

What will you make today?

A new skill, a quick fix, or the start of something bigger.

Find your next tool