Pure Python CSS generator — gradients, shadows, flexbox, grid, animations, transforms, filters, glassmorphism, and more. Zero dependencies, type-safe, with CLI, MCP server, and REST API client.
Built from PeasyCSS, the interactive CSS tools platform with 200+ generators and references.
Try the interactive tools at peasycss.com — CSS Tools, CSS Glossary
- Install
- Quick Start
- What You Can Do
- Command-Line Interface
- MCP Server (Claude, Cursor, Windsurf)
- REST API Client
- API Reference
- Learn More About CSS
- Also Available
- Peasy Developer Tools
- License
# Core library (zero dependencies)
pip install peasy-css
# With CLI
pip install "peasy-css[cli]"
# With MCP server for AI assistants
pip install "peasy-css[mcp]"
# With REST API client
pip install "peasy-css[api]"
# Everything
pip install "peasy-css[all]"from peasy_css import gradient, box_shadow, Shadow, flexbox, glassmorphism
# Generate a linear gradient
css = gradient(["#ff6b35", "#f7c948", "#2ec4b6"])
# → "linear-gradient(to right, #ff6b35, #f7c948, #2ec4b6)"
# Create a box shadow
shadow = Shadow(x="0px", y="4px", blur="12px", color="rgba(0,0,0,0.15)")
css = box_shadow(shadow)
# → "0px 4px 12px 0px rgba(0,0,0,0.15)"
# Flexbox layout
css = flexbox(direction="row", justify="center", align="center", gap="1rem")
# → "display: flex;\nflex-direction: row;\njustify-content: center;\nalign-items: center;\ngap: 1rem;"
# Glassmorphism effect
css = glassmorphism(blur="20px", background="rgba(255,255,255,0.1)")
# → backdrop-filter, background, border — frosted glass effectCSS gradients create smooth color transitions — linear (directional), radial (circular), and conic (angular). The gradient() function supports all three types with optional repeating patterns and precise color stops.
| Type | CSS Function | Use Case |
|---|---|---|
| Linear | linear-gradient() |
Backgrounds, buttons, headers |
| Radial | radial-gradient() |
Spotlight effects, circular highlights |
| Conic | conic-gradient() |
Pie charts, color wheels |
| Repeating | repeating-*-gradient() |
Striped patterns, progress bars |
from peasy_css import gradient, gradient_css, ColorStop
# Linear gradient with direction
gradient(["#e66465", "#9198e5"], direction="to bottom")
# → "linear-gradient(to bottom, #e66465, #9198e5)"
# Radial gradient
gradient(["#fff", "#000"], gradient_type="radial")
# → "radial-gradient(circle, #fff, #000)"
# Precise color stops
stops = [ColorStop("red", "0%"), ColorStop("yellow", "50%"), ColorStop("green", "100%")]
gradient(stops)
# → "linear-gradient(to right, red 0%, yellow 50%, green 100%)"
# Complete CSS rule
gradient_css(".hero", ["#667eea", "#764ba2"])
# → ".hero {\n background: linear-gradient(to right, #667eea, #764ba2);\n}"Learn more: CSS Gradient Generator · CSS Gradients Guide · How to Generate Gradients for Web Design
Box shadows add depth and elevation to elements. Multiple shadows can be layered for complex effects like material design elevation or neumorphism.
from peasy_css import box_shadow, box_shadow_css, Shadow
# Single shadow
s = Shadow(x="0px", y="4px", blur="6px", spread="0px", color="rgba(0,0,0,0.1)")
box_shadow(s)
# → "0px 4px 6px 0px rgba(0,0,0,0.1)"
# Inset shadow (inner shadow)
s = Shadow(x="0px", y="2px", blur="4px", color="rgba(0,0,0,0.2)", inset=True)
box_shadow(s)
# → "inset 0px 2px 4px 0px rgba(0,0,0,0.2)"
# Multiple layered shadows
s1 = Shadow(y="2px", blur="4px", color="rgba(0,0,0,0.1)")
s2 = Shadow(y="8px", blur="16px", color="rgba(0,0,0,0.1)")
box_shadow(s1, s2)
# → "0px 2px 4px 0px rgba(0,0,0,0.1), 0px 8px 16px 0px rgba(0,0,0,0.1)"Learn more: CSS Box Shadow Generator · What is Box Model? · What is Stacking Context?
Flexbox is a one-dimensional layout model for distributing space and aligning items. It handles both horizontal (row) and vertical (column) layouts with powerful alignment controls.
| Property | Values | Default |
|---|---|---|
direction |
row, row-reverse, column, column-reverse | row |
wrap |
nowrap, wrap, wrap-reverse | nowrap |
justify |
flex-start, flex-end, center, space-between, space-around, space-evenly | flex-start |
align |
stretch, flex-start, flex-end, center, baseline | stretch |
from peasy_css import flexbox, flexbox_css
# Centered content
flexbox(justify="center", align="center")
# Responsive card layout
flexbox(wrap="wrap", gap="1.5rem", justify="space-between")
# Complete CSS rule
flexbox_css(".navbar", direction="row", justify="space-between", align="center")
# → ".navbar {\n display: flex;\n flex-direction: row;\n ..."Learn more: CSS Flexbox Generator · Flexbox vs CSS Grid · What is Flexbox?
CSS Grid is a two-dimensional layout system for rows and columns simultaneously. It excels at complex page layouts, card grids, and dashboard designs.
from peasy_css import grid, grid_css, GridTemplate
# Default 3-column grid
grid()
# → "display: grid;\ngrid-template-columns: 1fr 1fr 1fr;\ngap: 1rem;"
# Custom grid template
t = GridTemplate(columns="repeat(4, 1fr)", rows="auto 1fr auto", gap="2rem")
grid(t)
# Dense auto-flow (fill gaps automatically)
t = GridTemplate(columns="repeat(auto-fill, minmax(250px, 1fr))", auto_flow="dense")
grid(t)Learn more: CSS Grid Generator · CSS Grid vs Flexbox: When to Use Each · What is CSS Grid?
CSS animations bring elements to life with multi-step transitions. The animation() function generates the shorthand property, while keyframes() creates @keyframes rules.
from peasy_css import animation, animation_css, keyframes, Keyframe
# Animation shorthand
animation("fadeIn", "0.5s", "ease-in")
# → "fadeIn 0.5s ease-in 0s 1 normal none"
# Keyframes definition
frames = [
Keyframe("from", {"opacity": "0", "transform": "translateY(-20px)"}),
Keyframe("to", {"opacity": "1", "transform": "translateY(0)"}),
]
keyframes("fadeIn", frames)
# → "@keyframes fadeIn {\n from { opacity: 0; transform: translateY(-20px); }\n to { ... }\n}"Learn more: CSS Animation Generator · How to Create CSS Animations · What is Keyframe Animation?
CSS transforms modify the visual rendering of elements — translate, rotate, scale, and skew without affecting document flow.
from peasy_css import transform, transform_css
# Single transform
transform(rotate="45deg")
# → "rotate(45deg)"
# Combined transforms
transform(translate_x="10px", translate_y="20px", rotate="45deg", scale_x="1.5")
# → "translate(10px, 20px) rotate(45deg) scale(1.5, 1)"
# No transforms applied
transform()
# → "none"Learn more: CSS Transform Generator · CSS Animation Performance Guide · What is Transition?
CSS filters apply graphical effects like blur, brightness, contrast, and grayscale to elements — commonly used for image effects and hover states.
from peasy_css import css_filter, filter_css
# Single filter
css_filter(blur="5px")
# → "blur(5px)"
# Multiple filters
css_filter(blur="2px", brightness="120%", grayscale="50%")
# → "blur(2px) brightness(120%) grayscale(50%)"Learn more: CSS Filter Effects Generator · CSS Clip Path Generator · What is Color Function?
Glassmorphism creates a frosted glass effect using backdrop-filter, semi-transparent backgrounds, and subtle borders. It's widely used in modern UI design (iOS, Windows 11).
from peasy_css import glassmorphism, glassmorphism_css
# Default glassmorphism
glassmorphism()
# → "backdrop-filter: blur(10px);\n-webkit-backdrop-filter: blur(10px);\nbackground: rgba(255, 255, 255, 0.25);\nborder: 1px solid rgba(255, 255, 255, 0.18);"
# Custom glass effect
glassmorphism(blur="20px", background="rgba(0, 0, 0, 0.3)")
# Complete CSS rule
glassmorphism_css(".modal", blur="15px")Learn more: Dark Mode Design Best Practices · What is Custom Property? · What is Cascade?
CSS clamp() enables fluid typography that scales smoothly between viewport sizes — replacing complex media query breakpoints with a single declaration.
from peasy_css import clamp, clamp_font_css
# Fluid value
clamp("1rem", "2.5vw", "3rem")
# → "clamp(1rem, 2.5vw, 3rem)"
# Fluid font-size CSS rule
clamp_font_css("h1", "1.5rem", "4vw", "3rem")
# → "h1 {\n font-size: clamp(1.5rem, 4vw, 3rem);\n}"Learn more: Fluid Typography with Clamp in Modern CSS · What is Clamp? · What is Viewport Unit?
Media queries enable responsive design by applying CSS rules at specific viewport breakpoints.
from peasy_css import media_query
# Min-width (mobile-first)
media_query("768px", ".sidebar { display: block; }")
# → "@media (min-width: 768px) {\n .sidebar { display: block; }\n}"
# Max-width (desktop-first)
media_query("480px", "body { font-size: 14px; }", type="max-width")
# → "@media (max-width: 480px) {\n body { font-size: 14px; }\n}"Learn more: CSS Media Query Generator · Responsive Layouts Without Media Queries · What is Media Query?
# Generate a gradient
peasy-css gradient --colors "#ff6b35" "#f7c948" "#2ec4b6"
# Box shadow
peasy-css shadow --x 0px --y 4px --blur 12px --color "rgba(0,0,0,0.15)"
# Flexbox layout
peasy-css flexbox --direction row --justify center --align center --gap 1rem
# CSS Grid
peasy-css grid --columns "repeat(3, 1fr)" --gap 2rem
# Glassmorphism
peasy-css glass --blur 20px --background "rgba(255,255,255,0.1)"
# Fluid font size
peasy-css clamp --min 1rem --preferred 2.5vw --max 3remStart the MCP server for AI-assisted CSS generation:
uvx --from "peasy-css[mcp]" python -m peasy_css{
"mcpServers": {
"peasy-css": {
"command": "uvx",
"args": ["--from", "peasy-css[mcp]", "python", "-m", "peasy_css"]
}
}
}{
"mcpServers": {
"peasy-css": {
"command": "uvx",
"args": ["--from", "peasy-css[mcp]", "python", "-m", "peasy_css"]
}
}
}Available MCP tools: css_gradient, css_box_shadow, css_flexbox, css_grid, css_animation, css_transform, css_glassmorphism, css_clamp_font, css_media_query
from peasy_css.api import PeasyCssAPI
api = PeasyCssAPI()
# List all CSS tools
tools = api.list_tools()
# Get a specific tool
tool = api.get_tool("gradient-generator")
# Search tools and glossary
results = api.search("flexbox")
# OpenAPI specification
spec = api.openapi_spec()
# Search the CSS glossary for technical terms
terms = api.search_glossary("specificity")
for term in terms:
print(f"{term['term']}: {term['definition']}")
# Browse CSS guides and tutorials
guides = api.list_guides()
for guide in guides:
print(f"{guide['title']}: {guide['url']}")
# Discover use cases for CSS generators
use_cases = api.list_use_cases()
for uc in use_cases:
print(f"{uc['title']}: {uc['description']}")| Function | Description |
|---|---|
gradient(colors, ...) |
Generate CSS gradient value |
gradient_css(selector, colors, ...) |
Complete gradient CSS rule |
box_shadow(*shadows) |
Generate box-shadow value |
box_shadow_css(selector, *shadows) |
Complete box-shadow CSS rule |
text_shadow(x, y, blur, color) |
Generate text-shadow value |
text_shadow_css(selector, ...) |
Complete text-shadow CSS rule |
border_radius(...) |
Generate border-radius value |
border_radius_css(selector, ...) |
Complete border-radius CSS rule |
flexbox(...) |
Generate flexbox properties |
flexbox_css(selector, ...) |
Complete flexbox CSS rule |
grid(template) |
Generate grid properties |
grid_css(selector, template) |
Complete grid CSS rule |
animation(name, duration, timing) |
Generate animation shorthand |
animation_css(selector, name, ...) |
Complete animation CSS rule |
keyframes(name, frames) |
Generate @keyframes rule |
transform(...) |
Generate transform value |
transform_css(selector, ...) |
Complete transform CSS rule |
css_filter(...) |
Generate filter value |
filter_css(selector, ...) |
Complete filter CSS rule |
transition(prop, duration, timing) |
Generate transition value |
transition_css(selector, ...) |
Complete transition CSS rule |
media_query(breakpoint, css, type) |
Wrap CSS in @media rule |
typography(...) |
Generate typography properties |
typography_css(selector, ...) |
Complete typography CSS rule |
aspect_ratio(ratio) |
Generate aspect-ratio value |
aspect_ratio_css(selector, ratio) |
Complete aspect-ratio CSS rule |
clamp(min, preferred, max) |
Generate clamp() value |
clamp_font_css(selector, ...) |
Complete fluid font-size CSS rule |
glassmorphism(...) |
Generate glassmorphism properties |
glassmorphism_css(selector, ...) |
Complete glassmorphism CSS rule |
| Type | Fields |
|---|---|
ColorStop |
color: str, position: str |
Shadow |
x, y, blur, spread, color, inset |
GridTemplate |
columns, rows, gap, auto_flow |
Keyframe |
selector: str, properties: dict[str, str] |
- Tools: CSS Minify · CSS Beautify · CSS Gradient Generator · Box Shadow Generator · Flexbox Generator · Grid Generator · Animation Generator · Transform Generator · Filter Effects · Media Query Generator · Border Radius · Text Shadow · Clip Path · Unit Converter · Color Converter · All CSS Tools
- Guides: CSS Units Explained · CSS Grid vs Flexbox · CSS Custom Properties Guide · CSS Animation Performance · CSS Gradients Guide · Flexbox vs CSS Grid · Dark Mode Best Practices · How to Create CSS Animations · Responsive Layouts Without Media Queries · Troubleshooting CSS Specificity · Fluid Typography with Clamp · How to Minify CSS for Production · All Guides
- Glossary: Flexbox · CSS Grid · Box Model · Cascade · Specificity · Custom Property · Media Query · Keyframe Animation · Clamp · BEM · Z-Index · Transition · Viewport Unit · Pseudo Class · All Terms
- Formats: CSS · SVG · HTML · SCSS · LESS · All Formats
- API: REST API Docs · OpenAPI Spec
| Platform | Install | Link |
|---|---|---|
| TypeScript / npm | npm install peasy-css |
npm |
| Go | go get github.com/peasytools/peasy-css-go |
pkg.go.dev |
| Rust | cargo add peasy-css |
crates.io |
| Ruby | gem install peasy-css |
RubyGems |
| MCP | uvx --from "peasy-css[mcp]" python -m peasy_css.mcp_server |
Config |
Part of the Peasy open-source developer tools ecosystem.
| Package | PyPI | npm | Description |
|---|---|---|---|
| peasy-pdf | PyPI | npm | PDF merge, split, compress, 21 operations — peasypdf.com |
| peasy-image | PyPI | npm | Image resize, crop, convert, compress, 20 operations — peasyimage.com |
| peasytext | PyPI | npm | Text case, slugify, word count, encoding — peasytext.com |
| peasy-css | PyPI | npm | CSS gradients, shadows, flexbox, grid generators — peasycss.com |
| peasy-compress | PyPI | npm | ZIP, TAR, gzip, brotli archive operations — peasytools.com |
| peasy-document | PyPI | npm | Markdown, HTML, CSV, JSON conversions — peasyformats.com |
| peasy-audio | PyPI | npm | Audio convert, trim, merge, normalize — peasyaudio.com |
| peasy-video | PyPI | npm | Video trim, resize, GIF conversion — peasyvideo.com |
MIT