> ## 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 Background Pattern Generator
> Generate a seamless repeating background pattern in pure CSS — dots, grids, stripes, checkerboards, waves and 3D cubes — with your own colors, scale and opacity. Copy the ready-made CSS rule and HTML snippet, no image file needed.
[Try CSS Background Pattern Generator in your browser →](https://iotools.cloud/tool/css-background-pattern-generator/)
## OpenAPI
````yaml https://api.iotools.cloud/v1/openapi post /v1/tool/css-background-pattern-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-background-pattern-generator:
post:
tags:
- Generators
summary: CSS Background Pattern Generator
description: >-
Generate a seamless repeating background pattern in pure CSS — dots,
grids, stripes, checkerboards, waves and 3D cubes — with your own
colors, scale and opacity. Copy the ready-made CSS rule and HTML
snippet, no image file needed.
[Try CSS Background Pattern Generator in your browser
→](https://iotools.cloud/tool/css-background-pattern-generator/)
operationId: run_css_background_pattern_generator
requestBody:
required: false
content:
application/json:
schema:
type: object
properties:
pattern:
enum:
- dots
- dots-offset
- grid
- graph
- stripes-h
- stripes-v
- stripes-d
- crosshatch
- isometric
- checkerboard
- diamonds
- triangles
- zigzag
- waves
- cubes
description: Pattern
color:
type: string
description: Pattern color
bgColor:
type: string
description: Background color
opacity:
type: number
description: Pattern opacity
minimum: 5
maximum: 100
size:
type: number
description: Pattern size
minimum: 4
maximum: 160
weight:
type: number
description: Line weight
minimum: 1
maximum: 24
className:
type: string
description: Class name
required: []
examples:
polka_dots:
summary: Polka dots
value:
pattern: dots
color: '#6366f1'
bgColor: '#ffffff'
opacity: '100'
size: '32'
weight: '3'
className: io-pattern
faint_blueprint_grid:
summary: Faint blueprint grid
value:
pattern: grid
color: '#0ea5e9'
bgColor: '#0f172a'
opacity: '35'
size: '24'
weight: '1'
className: blueprint
diagonal_stripes:
summary: Diagonal stripes
value:
pattern: stripes-d
color: '#f59e0b'
bgColor: '#fffbeb'
opacity: '100'
size: '20'
weight: '6'
className: stripes
checkerboard:
summary: Checkerboard
value:
pattern: checkerboard
color: '#111827'
bgColor: '#f3f4f6'
opacity: '100'
size: '16'
weight: '3'
className: checkers
wave_lines:
summary: Wave lines
value:
pattern: waves
color: '#0d9488'
bgColor: '#ffffff'
opacity: '100'
size: '40'
weight: '3'
className: waves
isometric_cubes:
summary: Isometric cubes
value:
pattern: cubes
color: '#8b5cf6'
bgColor: '#faf5ff'
opacity: '100'
size: '40'
weight: '3'
className: cubes
responses:
'200':
description: Tool output
content:
application/json:
examples:
polka_dots:
summary: Polka dots
value:
tool: css-background-pattern-generator
tool_version: 1.0.1
outputs:
css: |-
.io-pattern {
background-color: #ffffff;
background-image: radial-gradient(circle, #6366f1 3px, transparent 4px);
background-size: 32px 32px;
}
html: ''
credits_used: 3
credits_remaining: null
faint_blueprint_grid:
summary: Faint blueprint grid
value:
tool: css-background-pattern-generator
tool_version: 1.0.1
outputs:
css: |-
.blueprint {
background-color: #0f172a;
background-image:
linear-gradient(to right, rgba(14, 165, 233, 0.35) 1px, transparent 1px),
linear-gradient(to bottom, rgba(14, 165, 233, 0.35) 1px, transparent 1px);
background-size: 24px 24px;
}
html: ''
credits_used: 3
credits_remaining: null
diagonal_stripes:
summary: Diagonal stripes
value:
tool: css-background-pattern-generator
tool_version: 1.0.1
outputs:
css: |-
.stripes {
background-color: #fffbeb;
background-image: repeating-linear-gradient(45deg, #f59e0b 0 6px, transparent 6px 20px);
}
html: ''
credits_used: 3
credits_remaining: null
checkerboard:
summary: Checkerboard
value:
tool: css-background-pattern-generator
tool_version: 1.0.1
outputs:
css: |-
.checkers {
background-color: #f3f4f6;
background-image:
linear-gradient(45deg, #111827 25%, transparent 25%, transparent 75%, #111827 75%, #111827),
linear-gradient(45deg, #111827 25%, transparent 25%, transparent 75%, #111827 75%, #111827);
background-size: 32px 32px;
background-position:
0 0,
16px 16px;
}
html: ''
credits_used: 3
credits_remaining: null
wave_lines:
summary: Wave lines
value:
tool: css-background-pattern-generator
tool_version: 1.0.1
outputs:
css: |-
.waves {
background-color: #ffffff;
background-image:
radial-gradient(circle at 50% 0, transparent 17px, #0d9488 17px, #0d9488 20px, transparent 20px),
radial-gradient(circle at 50% 100%, transparent 17px, #0d9488 17px, #0d9488 20px, transparent 20px);
background-size: 40px 40px;
background-position:
0 0,
20px 0;
}
html: ''
credits_used: 3
credits_remaining: null
isometric_cubes:
summary: Isometric cubes
value:
tool: css-background-pattern-generator
tool_version: 1.0.1
outputs:
css: |-
.cubes {
background-color: #faf5ff;
background-image:
linear-gradient(30deg, #8b5cf6 12%, transparent 12.5%, transparent 87%, #8b5cf6 87.5%, #8b5cf6),
linear-gradient(150deg, #8b5cf6 12%, transparent 12.5%, transparent 87%, #8b5cf6 87.5%, #8b5cf6),
linear-gradient(30deg, #8b5cf6 12%, transparent 12.5%, transparent 87%, #8b5cf6 87.5%, #8b5cf6),
linear-gradient(150deg, #8b5cf6 12%, transparent 12.5%, transparent 87%, #8b5cf6 87.5%, #8b5cf6),
linear-gradient(60deg, rgba(139, 92, 246, 0.45) 25%, transparent 25.5%, transparent 75%, rgba(139, 92, 246, 0.45) 75%, rgba(139, 92, 246, 0.45)),
linear-gradient(60deg, rgba(139, 92, 246, 0.45) 25%, transparent 25.5%, transparent 75%, rgba(139, 92, 246, 0.45) 75%, rgba(139, 92, 246, 0.45));
background-size: 80px 140px;
background-position:
0 0,
0 0,
40px 70px,
40px 70px,
0 0,
40px 70px;
}
html: ''
credits_used: 3
credits_remaining: null
schema:
type: object
required:
- tool
- tool_version
- outputs
- credits_used
- credits_remaining
properties:
outputs:
type: object
properties:
css:
type: string
description: CSS
html:
type: string
description: HTML snippet
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_…
````