> ## Documentation Index
> Fetch the complete documentation index at: https://docs.iotools.cloud/llms.txt
> Use this file to discover all available pages before exploring further.
# CSS Checkbox Generator
> Generate a custom-styled CSS checkbox or toggle switch — pick a style, colors, size, corner radius and animation speed, and copy the ready-made CSS + HTML. Pure CSS, keyboard-accessible, no JavaScript.
[Try CSS Checkbox Generator in your browser →](https://iotools.cloud/tool/css-checkbox-generator/)
## OpenAPI
````yaml https://api.iotools.cloud/v1/openapi post /v1/tool/css-checkbox-generator
openapi: 3.1.0
info:
title: iotools.cloud API
version: 1.0.0
description: >-
Run any iotools.cloud tool over HTTP.
Authenticate with `Authorization: Bearer iot_live_…`.
**Only `POST /v1/tool/{slug}` costs credits.** Every GET here — the catalog,
a tool's schema, your balance — is free. A tool call is charged its own
weight or your plan's per-call minimum, whichever is larger;
`x-iotools-credit-cost` on each operation is quoted at the free-tier
minimum, and `GET /v1/tools/list` returns the exact figure for your key.
`GET /v1/me/credits` reports what you have left, and `GET /v1/me/usage`
reports what it went on.
Failures are RFC 9457 problem documents — branch on `code`.
servers:
- url: https://api.iotools.cloud
description: Production
security:
- bearerAuth: []
tags:
- name: Catalog
description: Find a tool and read its contract. Free.
- name: Converters
description: >-
Convert between formats, encodings, and units — Base64, CSV and JSON,
timestamps, and more. Fast, free, and processed right in your browser.
- name: Formatters
description: >-
Format, beautify, minify, and validate code and data — JSON, HTML, CSS,
SQL, and regex. Clean up messy input in one click, with nothing to upload.
- name: Generators
description: >-
Generate exactly what you need and on demand — passwords, UUIDs, QR codes,
hashes, random numbers, and more. Secure, instant, and free.
- name: Calculators
description: >-
Crunch the numbers fast — from everyday math to specialized conversions
and unit work. Free online calculators that run entirely in your browser.
- name: Editors
description: >-
Edit and transform text, code, and images with quick, focused editors that
run entirely in your browser — nothing to install, and no sign-up needed.
- name: Utilities
description: >-
Everyday developer and web utilities — DNS and IP lookups, redirect and
certificate checkers, and other quick diagnostics. Free and
privacy-friendly.
- name: Account
description: Your key's allowance, limits and usage history.
paths:
/v1/tool/css-checkbox-generator:
post:
tags:
- Generators
summary: CSS Checkbox Generator
description: >-
Generate a custom-styled CSS checkbox or toggle switch — pick a style,
colors, size, corner radius and animation speed, and copy the ready-made
CSS + HTML. Pure CSS, keyboard-accessible, no JavaScript.
[Try CSS Checkbox Generator in your browser
→](https://iotools.cloud/tool/css-checkbox-generator/)
operationId: run_css_checkbox_generator
requestBody:
required: false
content:
application/json:
schema:
type: object
properties:
style:
enum:
- filled
- outline
- circle
- toggle
- jelly
- cross
description: Checkbox Style
size:
type: number
description: Size (px)
minimum: 14
maximum: 48
accentColor:
type: string
description: Accent Color
borderColor:
type: string
description: Unchecked Color
checkColor:
type: string
description: Check Mark Color
radius:
type: number
description: Corner Radius (px)
minimum: 0
maximum: 24
duration:
type: number
description: Animation Duration (seconds)
minimum: 0.05
maximum: 1
labelText:
type: string
description: Label Text
classPrefix:
type: string
description: Class Prefix
required: []
examples:
filled_square:
summary: Filled square
value:
style: filled
size: '24'
accentColor: '#2563eb'
borderColor: '#9ca3af'
checkColor: '#ffffff'
radius: '6'
duration: '0.2'
labelText: I agree to the terms
classPrefix: io
toggle_switch:
summary: Toggle switch
value:
style: toggle
size: '28'
accentColor: '#16a34a'
borderColor: '#d1d5db'
checkColor: '#ffffff'
radius: '6'
duration: '0.25'
labelText: Email notifications
classPrefix: ui
jelly_bounce:
summary: Jelly bounce
value:
style: jelly
size: '26'
accentColor: '#db2777'
borderColor: '#9ca3af'
checkColor: '#ffffff'
radius: '8'
duration: '0.3'
labelText: Remember me
classPrefix: io
responses:
'200':
description: Tool output
content:
application/json:
examples:
filled_square:
summary: Filled square
value:
tool: css-checkbox-generator
tool_version: 1.0.1
outputs:
cssCode: |-
.io-checkbox {
display: inline-flex;
align-items: center;
gap: 8px;
font: inherit;
line-height: 1.4;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.io-checkbox input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
position: relative;
flex: 0 0 auto;
margin: 0;
box-sizing: border-box;
cursor: pointer;
width: 24px;
height: 24px;
border: 2px solid #9ca3af;
border-radius: 6px;
background-color: transparent;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.io-checkbox input[type="checkbox"]::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 7px;
height: 12px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
transform: translate(-50%, -60%) rotate(45deg) scale(0);
transition: transform 0.2s ease;
}
.io-checkbox input[type="checkbox"]:checked::after {
transform: translate(-50%, -60%) rotate(45deg) scale(1);
}
.io-checkbox input[type="checkbox"]:checked {
background-color: #2563eb;
border-color: #2563eb;
}
.io-checkbox input[type="checkbox"]:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
.io-checkbox input[type="checkbox"]:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.io-checkbox:has(input:disabled) {
cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
.io-checkbox input[type="checkbox"],
.io-checkbox input[type="checkbox"]::after {
transition: none;
animation: none;
}
}
htmlCode: |-
credits_used: 3
credits_remaining: null
toggle_switch:
summary: Toggle switch
value:
tool: css-checkbox-generator
tool_version: 1.0.1
outputs:
cssCode: |-
.ui-checkbox {
display: inline-flex;
align-items: center;
gap: 10px;
font: inherit;
line-height: 1.4;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.ui-checkbox input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
position: relative;
flex: 0 0 auto;
margin: 0;
box-sizing: border-box;
cursor: pointer;
width: 50px;
height: 28px;
border: 0;
border-radius: 999px;
background-color: #d1d5db;
transition: background-color 0.25s ease;
}
.ui-checkbox input[type="checkbox"]::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: #ffffff;
transition: transform 0.25s ease;
}
.ui-checkbox input[type="checkbox"]:checked {
background-color: #16a34a;
}
.ui-checkbox input[type="checkbox"]:checked::after {
transform: translateX(22px);
}
.ui-checkbox input[type="checkbox"]:focus-visible {
outline: 2px solid #16a34a;
outline-offset: 2px;
}
.ui-checkbox input[type="checkbox"]:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.ui-checkbox:has(input:disabled) {
cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
.ui-checkbox input[type="checkbox"],
.ui-checkbox input[type="checkbox"]::after {
transition: none;
animation: none;
}
}
htmlCode: |-
credits_used: 3
credits_remaining: null
jelly_bounce:
summary: Jelly bounce
value:
tool: css-checkbox-generator
tool_version: 1.0.1
outputs:
cssCode: |-
.io-checkbox {
display: inline-flex;
align-items: center;
gap: 9px;
font: inherit;
line-height: 1.4;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.io-checkbox input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
position: relative;
flex: 0 0 auto;
margin: 0;
box-sizing: border-box;
cursor: pointer;
width: 26px;
height: 26px;
border: 3px solid #9ca3af;
border-radius: 8px;
background-color: transparent;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.io-checkbox input[type="checkbox"]::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 7px;
height: 13px;
border: solid #ffffff;
border-width: 0 3px 3px 0;
transform: translate(-50%, -60%) rotate(45deg) scale(0);
transition: transform 0.3s ease;
}
.io-checkbox input[type="checkbox"]:checked::after {
transform: translate(-50%, -60%) rotate(45deg) scale(1);
}
.io-checkbox input[type="checkbox"]:checked {
background-color: #db2777;
border-color: #db2777;
animation: io-checkbox-jelly 0.6s ease;
}
@keyframes io-checkbox-jelly {
0% {
transform: scale(1);
}
35% {
transform: scale(0.82, 1.18);
}
55% {
transform: scale(1.16, 0.84);
}
75% {
transform: scale(0.94, 1.06);
}
100% {
transform: scale(1);
}
}
.io-checkbox input[type="checkbox"]:focus-visible {
outline: 2px solid #db2777;
outline-offset: 2px;
}
.io-checkbox input[type="checkbox"]:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.io-checkbox:has(input:disabled) {
cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
.io-checkbox input[type="checkbox"],
.io-checkbox input[type="checkbox"]::after,
.io-checkbox input[type="checkbox"]:checked {
transition: none;
animation: none;
}
}
htmlCode: |-
credits_used: 3
credits_remaining: null
schema:
type: object
required:
- tool
- tool_version
- outputs
- credits_used
- credits_remaining
properties:
outputs:
type: object
properties:
cssCode:
type: string
description: CSS
htmlCode:
type: string
description: HTML
tool:
type: string
description: The tool's slug, echoing the {slug} in the request path.
tool_version:
type: string
description: Output-contract version for this tool.
credits_used:
type: integer
description: >-
Credits this call consumed, after any settlement refund. 0
when metering is disabled.
credits_remaining:
type:
- integer
- 'null'
description: >-
Credits left in the current monthly allowance, or null
when metering is disabled.
request_id:
type: string
description: Correlation id, also sent as x-request-id.
'400':
$ref: '#/components/responses/ValidationError'
'401':
$ref: '#/components/responses/Unauthorized'
'402':
$ref: '#/components/responses/InsufficientCredits'
'403':
$ref: '#/components/responses/ToolNotAllowed'
'404':
$ref: '#/components/responses/ToolNotFound'
'413':
$ref: '#/components/responses/PayloadTooLarge'
'429':
$ref: '#/components/responses/RateLimited'
'500':
$ref: '#/components/responses/ToolFailed'
'503':
$ref: '#/components/responses/ToolDisabled'
security:
- bearerAuth: []
components:
responses:
ValidationError:
description: Invalid request.
content:
application/problem+json:
schema:
type: object
description: >-
RFC 9457 problem document, served as application/problem+json.
Branch on `code`; `title` is human prose and may be reworded
without notice. Some failures add extension members — `fields` on
validation errors, `retry_after` on 429s,
`credits_used`/`credits_remaining` on billing-adjacent failures —
documented on the responses that carry them.
required:
- type
- title
- status
- code
properties:
type:
type: string
format: uri
description: Stable documentation URI for this failure.
examples:
- https://iotools.cloud/docs/errors/validation_error
title:
type: string
description: Short human-readable summary of the failure.
examples:
- Invalid request
status:
type: integer
description: HTTP status code, matching the response's own status.
code:
type: string
description: >-
Stable machine-readable error code — branch on this, not
`title`.
enum:
- validation_error
detail:
type: string
description: Human explanation of this occurrence.
request_id:
type: string
description: Correlation id, also sent as x-request-id.
fields:
type:
- object
- string
additionalProperties:
type: string
description: >-
What failed: a map of field name → message. Absent when the
body itself is malformed; a single string when the failure
isn't tied to one field.
example:
type: https://iotools.cloud/docs/errors/validation_error
title: Invalid request
status: 400
code: validation_error
detail: One or more inputs are invalid — see `fields`.
request_id: e4042b29-8f1e-4c7a-9b52-6f0d1a3c7e11
fields:
inputString: Required
Unauthorized:
description: Missing or invalid API key.
content:
application/problem+json:
schema:
type: object
description: >-
RFC 9457 problem document, served as application/problem+json.
Branch on `code`; `title` is human prose and may be reworded
without notice. Some failures add extension members — `fields` on
validation errors, `retry_after` on 429s,
`credits_used`/`credits_remaining` on billing-adjacent failures —
documented on the responses that carry them.
required:
- type
- title
- status
- code
properties:
type:
type: string
format: uri
description: Stable documentation URI for this failure.
examples:
- https://iotools.cloud/docs/errors/invalid_api_key
title:
type: string
description: Short human-readable summary of the failure.
examples:
- Invalid API key
status:
type: integer
description: HTTP status code, matching the response's own status.
code:
type: string
description: >-
Stable machine-readable error code — branch on this, not
`title`.
enum:
- invalid_api_key
detail:
type: string
description: Human explanation of this occurrence.
request_id:
type: string
description: Correlation id, also sent as x-request-id.
example:
type: https://iotools.cloud/docs/errors/invalid_api_key
title: Invalid API key
status: 401
code: invalid_api_key
detail: 'Provide ''Authorization: Bearer ''.'
request_id: e4042b29-8f1e-4c7a-9b52-6f0d1a3c7e11
InsufficientCredits:
description: Monthly credit allowance exhausted.
content:
application/problem+json:
schema:
type: object
description: >-
RFC 9457 problem document, served as application/problem+json.
Branch on `code`; `title` is human prose and may be reworded
without notice. Some failures add extension members — `fields` on
validation errors, `retry_after` on 429s,
`credits_used`/`credits_remaining` on billing-adjacent failures —
documented on the responses that carry them.
required:
- type
- title
- status
- code
properties:
type:
type: string
format: uri
description: Stable documentation URI for this failure.
examples:
- https://iotools.cloud/docs/errors/insufficient_credits
title:
type: string
description: Short human-readable summary of the failure.
examples:
- Insufficient credits
status:
type: integer
description: HTTP status code, matching the response's own status.
code:
type: string
description: >-
Stable machine-readable error code — branch on this, not
`title`.
enum:
- insufficient_credits
detail:
type: string
description: Human explanation of this occurrence.
request_id:
type: string
description: Correlation id, also sent as x-request-id.
credits_used:
type: integer
description: Always 0 — a refused call charges nothing.
credits_remaining:
type: integer
description: Credits left in the allowance — fewer than this call costs.
example:
type: https://iotools.cloud/docs/errors/insufficient_credits
title: Insufficient credits
status: 402
code: insufficient_credits
detail: This call costs 1 credit and 0 remain in this month's allowance.
request_id: e4042b29-8f1e-4c7a-9b52-6f0d1a3c7e11
credits_used: 0
credits_remaining: 0
ToolNotAllowed:
description: Tool exists but has no API surface.
content:
application/problem+json:
schema:
type: object
description: >-
RFC 9457 problem document, served as application/problem+json.
Branch on `code`; `title` is human prose and may be reworded
without notice. Some failures add extension members — `fields` on
validation errors, `retry_after` on 429s,
`credits_used`/`credits_remaining` on billing-adjacent failures —
documented on the responses that carry them.
required:
- type
- title
- status
- code
properties:
type:
type: string
format: uri
description: Stable documentation URI for this failure.
examples:
- https://iotools.cloud/docs/errors/tool_not_allowed
title:
type: string
description: Short human-readable summary of the failure.
examples:
- Tool not available over the API
status:
type: integer
description: HTTP status code, matching the response's own status.
code:
type: string
description: >-
Stable machine-readable error code — branch on this, not
`title`.
enum:
- tool_not_allowed
detail:
type: string
description: Human explanation of this occurrence.
request_id:
type: string
description: Correlation id, also sent as x-request-id.
example:
type: https://iotools.cloud/docs/errors/tool_not_allowed
title: Tool not available over the API
status: 403
code: tool_not_allowed
detail: >-
"Background Remover" is available on iotools.cloud but has no API
endpoint.
request_id: e4042b29-8f1e-4c7a-9b52-6f0d1a3c7e11
ToolNotFound:
description: No such tool.
content:
application/problem+json:
schema:
type: object
description: >-
RFC 9457 problem document, served as application/problem+json.
Branch on `code`; `title` is human prose and may be reworded
without notice. Some failures add extension members — `fields` on
validation errors, `retry_after` on 429s,
`credits_used`/`credits_remaining` on billing-adjacent failures —
documented on the responses that carry them.
required:
- type
- title
- status
- code
properties:
type:
type: string
format: uri
description: Stable documentation URI for this failure.
examples:
- https://iotools.cloud/docs/errors/tool_not_found
title:
type: string
description: Short human-readable summary of the failure.
examples:
- Tool not found
status:
type: integer
description: HTTP status code, matching the response's own status.
code:
type: string
description: >-
Stable machine-readable error code — branch on this, not
`title`.
enum:
- tool_not_found
detail:
type: string
description: Human explanation of this occurrence.
request_id:
type: string
description: Correlation id, also sent as x-request-id.
example:
type: https://iotools.cloud/docs/errors/tool_not_found
title: Tool not found
status: 404
code: tool_not_found
detail: No tool with that slug. See GET /v1/tools/list.
request_id: e4042b29-8f1e-4c7a-9b52-6f0d1a3c7e11
PayloadTooLarge:
description: Body too large.
content:
application/problem+json:
schema:
type: object
description: >-
RFC 9457 problem document, served as application/problem+json.
Branch on `code`; `title` is human prose and may be reworded
without notice. Some failures add extension members — `fields` on
validation errors, `retry_after` on 429s,
`credits_used`/`credits_remaining` on billing-adjacent failures —
documented on the responses that carry them.
required:
- type
- title
- status
- code
properties:
type:
type: string
format: uri
description: Stable documentation URI for this failure.
examples:
- https://iotools.cloud/docs/errors/payload_too_large
title:
type: string
description: Short human-readable summary of the failure.
examples:
- Payload too large
status:
type: integer
description: HTTP status code, matching the response's own status.
code:
type: string
description: >-
Stable machine-readable error code — branch on this, not
`title`.
enum:
- payload_too_large
detail:
type: string
description: Human explanation of this occurrence.
request_id:
type: string
description: Correlation id, also sent as x-request-id.
example:
type: https://iotools.cloud/docs/errors/payload_too_large
title: Payload too large
status: 413
code: payload_too_large
detail: Request body exceeds this tool's size limit.
request_id: e4042b29-8f1e-4c7a-9b52-6f0d1a3c7e11
RateLimited:
description: Per-minute rate limit exceeded.
headers:
Retry-After:
description: Seconds to wait before retrying (RFC 9110 delta-seconds).
schema:
type: integer
content:
application/problem+json:
schema:
type: object
description: >-
RFC 9457 problem document, served as application/problem+json.
Branch on `code`; `title` is human prose and may be reworded
without notice. Some failures add extension members — `fields` on
validation errors, `retry_after` on 429s,
`credits_used`/`credits_remaining` on billing-adjacent failures —
documented on the responses that carry them.
required:
- type
- title
- status
- code
properties:
type:
type: string
format: uri
description: Stable documentation URI for this failure.
examples:
- https://iotools.cloud/docs/errors/rate_limited
title:
type: string
description: Short human-readable summary of the failure.
examples:
- Rate limit exceeded
status:
type: integer
description: HTTP status code, matching the response's own status.
code:
type: string
description: >-
Stable machine-readable error code — branch on this, not
`title`.
enum:
- rate_limited
detail:
type: string
description: Human explanation of this occurrence.
request_id:
type: string
description: Correlation id, also sent as x-request-id.
retry_after:
type: integer
description: >-
Seconds until the window resets — the same value as the
`Retry-After` header.
example:
type: https://iotools.cloud/docs/errors/rate_limited
title: Rate limit exceeded
status: 429
code: rate_limited
detail: Too many requests. Retry in 30s.
request_id: e4042b29-8f1e-4c7a-9b52-6f0d1a3c7e11
retry_after: 30
ToolFailed:
description: Tool failed to run.
content:
application/problem+json:
schema:
type: object
description: >-
RFC 9457 problem document, served as application/problem+json.
Branch on `code`; `title` is human prose and may be reworded
without notice. Some failures add extension members — `fields` on
validation errors, `retry_after` on 429s,
`credits_used`/`credits_remaining` on billing-adjacent failures —
documented on the responses that carry them.
required:
- type
- title
- status
- code
properties:
type:
type: string
format: uri
description: Stable documentation URI for this failure.
examples:
- https://iotools.cloud/docs/errors/processing_error
- https://iotools.cloud/docs/errors/internal_error
title:
type: string
description: Short human-readable summary of the failure.
examples:
- Tool failed to run
- Internal error
status:
type: integer
description: HTTP status code, matching the response's own status.
code:
type: string
description: >-
Stable machine-readable error code — branch on this, not
`title`.
enum:
- processing_error
- internal_error
detail:
type: string
description: Human explanation of this occurrence.
request_id:
type: string
description: Correlation id, also sent as x-request-id.
credits_used:
type: integer
description: >-
Always 0 on `processing_error` — a failed run is refunded,
floor included.
credits_remaining:
type: integer
description: >-
Credits left after the refund. Absent when metering is
disabled.
example:
type: https://iotools.cloud/docs/errors/processing_error
title: Tool failed to run
status: 500
code: processing_error
detail: The tool failed to run. Please try again.
request_id: e4042b29-8f1e-4c7a-9b52-6f0d1a3c7e11
credits_used: 0
ToolDisabled:
description: Tool temporarily disabled.
content:
application/problem+json:
schema:
type: object
description: >-
RFC 9457 problem document, served as application/problem+json.
Branch on `code`; `title` is human prose and may be reworded
without notice. Some failures add extension members — `fields` on
validation errors, `retry_after` on 429s,
`credits_used`/`credits_remaining` on billing-adjacent failures —
documented on the responses that carry them.
required:
- type
- title
- status
- code
properties:
type:
type: string
format: uri
description: Stable documentation URI for this failure.
examples:
- https://iotools.cloud/docs/errors/tool_disabled
- https://iotools.cloud/docs/errors/api_unconfigured
title:
type: string
description: Short human-readable summary of the failure.
examples:
- Tool temporarily disabled
- API not configured
status:
type: integer
description: HTTP status code, matching the response's own status.
code:
type: string
description: >-
Stable machine-readable error code — branch on this, not
`title`.
enum:
- tool_disabled
- api_unconfigured
detail:
type: string
description: Human explanation of this occurrence.
request_id:
type: string
description: Correlation id, also sent as x-request-id.
example:
type: https://iotools.cloud/docs/errors/tool_disabled
title: Tool temporarily disabled
status: 503
code: tool_disabled
detail: This tool is temporarily unavailable. Try again shortly.
request_id: e4042b29-8f1e-4c7a-9b52-6f0d1a3c7e11
securitySchemes:
bearerAuth:
type: http
scheme: bearer
bearerFormat: iot_live_…
````