peasy-css

Pure TypeScript CSS generator — gradients, shadows, flexbox, grid, animations, transforms, filters, glassmorphism, typography, clamp, and more. Zero dependencies, fully typed, ESM-only.

Built from PeasyCSS, the interactive CSS tools platform with 200+ generators and references.

Try the interactive tools at peasycss.com — gradient generator, box shadow, flexbox, grid, glassmorphism, and 200+ more CSS tools

Table of Contents

• Install
• Quick Start
• What You Can Do
  • Gradients
  • Box Shadows
  • Flexbox Layouts
  • CSS Grid
  • Animations & Keyframes
  • Transforms
  • CSS Filters
  • Glassmorphism
  • Fluid Typography
  • Media Queries
• API Reference
• TypeScript Types
• REST API Client
• Learn More
• Also Available
• Peasy Developer Tools
• License

Install

npm install peasy-css

Quick Start

import {
  gradient,
  boxShadow,
  flexbox,
  glassmorphism,
} from "peasy-css";

// Generate a linear gradient
const bg = gradient(["#ff6b35", "#f7c948", "#2ec4b6"]);
// → "linear-gradient(to right, #ff6b35, #f7c948, #2ec4b6)"

// Create a box shadow with depth
const shadow = boxShadow({
  x: "0px",
  y: "4px",
  blur: "12px",
  color: "rgba(0,0,0,0.15)",
});
// → "0px 4px 12px 0px rgba(0,0,0,0.15)"

// Flexbox layout with centering
const layout = flexbox({ justify: "center", align: "center", gap: "1rem" });
// → "display: flex;\n  flex-direction: row;\n  ..."

// Frosted glass effect
const glass = glassmorphism({ blur: "20px" });
// → "backdrop-filter: blur(20px);\n  -webkit-backdrop-filter: ..."

What You Can Do

Gradients

CSS gradients create smooth color transitions — linear (directional), radial (circular), and conic (angular). All three types support 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 |

import { gradient, gradientCss } from "peasy-css";

// Linear gradient with custom direction
gradient(["#e66465", "#9198e5"], { direction: "to bottom" });
// → "linear-gradient(to bottom, #e66465, #9198e5)"

// Radial gradient for spotlight effect
gradient(["#fff", "#000"], { gradientType: "radial" });
// → "radial-gradient(circle, #fff, #000)"

// Color stops with precise positions
gradient([
  { color: "red", position: "0%" },
  { color: "yellow", position: "50%" },
  { color: "green", position: "100%" },
]);

// Complete CSS rule for a hero section
gradientCss(".hero", ["#667eea", "#764ba2"]);
// → ".hero {\n  background: linear-gradient(to right, #667eea, #764ba2);\n}"

Learn more: CSS Gradient Generator · CSS Gradients Guide · Gradient Design Trends & Techniques

Box Shadows

Box shadows add depth and elevation to elements. Multiple shadows create complex effects like material design elevation or neumorphism.

import { boxShadow, boxShadowCss } from "peasy-css";

// Single shadow with elevation
boxShadow({ x: "0px", y: "4px", blur: "6px", color: "rgba(0,0,0,0.1)" });

// Inset shadow for pressed/recessed look
boxShadow({ inset: true, y: "2px", blur: "4px", color: "rgba(0,0,0,0.2)" });

// Layered shadows for realistic depth
boxShadow(
  { y: "2px", blur: "4px", color: "rgba(0,0,0,0.1)" },
  { y: "8px", blur: "16px", color: "rgba(0,0,0,0.1)" },
);

Learn more: CSS Box Shadow Generator · What is Box Model? · What is Stacking Context?

Flexbox Layouts

Flexbox distributes space and aligns items in one dimension — row or column.

import { flexbox, flexboxCss } from "peasy-css";

// Centered content
flexbox({ justify: "center", align: "center" });

// Responsive card layout with wrapping
flexbox({ wrap: "wrap", gap: "1.5rem", justify: "space-between" });

// Complete navbar rule
flexboxCss(".navbar", { direction: "row", justify: "space-between", align: "center" });

Learn more: CSS Flexbox Generator · Flexbox vs CSS Grid · What is Flexbox?

CSS Grid

Two-dimensional layout for rows and columns simultaneously.

import { grid, gridCss } from "peasy-css";

// Default 3-column grid
grid();

// Responsive auto-fill grid with dense packing
grid({ columns: "repeat(auto-fill, minmax(250px, 1fr))", autoFlow: "dense" });

// Dashboard layout
gridCss(".dashboard", { columns: "250px 1fr 1fr", rows: "auto 1fr auto", gap: "2rem" });

Learn more: CSS Grid Generator · CSS Grid vs Flexbox: When to Use Each · What is CSS Grid?

Animations & Keyframes

Multi-step CSS animations with shorthand generation and @keyframes rules.

import { animation, keyframes, animationCss } from "peasy-css";

// Animation shorthand
animation("fadeIn", { duration: "0.5s", timing: "ease-in" });
// → "fadeIn 0.5s ease-in 0s 1 normal none"

// Keyframes definition
keyframes("fadeIn", [
  { selector: "from", properties: { opacity: "0", transform: "translateY(-20px)" } },
  { selector: "to", properties: { opacity: "1", transform: "translateY(0)" } },
]);

Learn more: CSS Animation Generator · How to Create CSS Animations · What is Keyframe Animation?

Transforms

Translate, rotate, scale, and skew elements without affecting document flow.

import { transform, transformCss } from "peasy-css";

transform({ rotate: "45deg" });
// → "rotate(45deg)"

transform({ translateX: "10px", translateY: "20px", rotate: "45deg", scaleX: "1.5" });
// → "translate(10px, 20px) rotate(45deg) scale(1.5, 1)"

Learn more: CSS Transform Generator · CSS Animation Performance Guide · What is Transition?

CSS Filters

Graphical effects — blur, brightness, contrast, grayscale — for images and hover states.

import { cssFilter, filterCss } from "peasy-css";

cssFilter({ blur: "5px" });
// → "blur(5px)"

cssFilter({ 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

Frosted glass effect with backdrop-filter, semi-transparent backgrounds, and subtle borders.

import { glassmorphism, glassmorphismCss } from "peasy-css";

glassmorphism();
// → "backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: ..."

glassmorphismCss(".modal", { blur: "15px", background: "rgba(0,0,0,0.3)" });

Learn more: Dark Mode Design Best Practices · What is Custom Property? · What is Cascade?

Fluid Typography

CSS clamp() for smooth scaling between viewport sizes.

import { clamp, clampFontCss } from "peasy-css";

clamp("1rem", "2.5vw", "3rem");
// → "clamp(1rem, 2.5vw, 3rem)"

clampFontCss("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

Responsive design with viewport breakpoints.

import { mediaQuery } from "peasy-css";

// Mobile-first (min-width)
mediaQuery("768px", ".sidebar { display: block; }");

// Desktop-first (max-width)
mediaQuery("480px", "body { font-size: 14px; }", "max-width");

Learn more: CSS Media Query Generator · Responsive Layouts Without Media Queries · What is Media Query?

API Reference

| Function | Description | |----------|-------------| | gradient(colors, options?) | CSS gradient value | | gradientCss(selector, colors, options?) | Complete gradient CSS rule | | boxShadow(...shadows) | box-shadow value | | boxShadowCss(selector, ...shadows) | Complete box-shadow CSS rule | | textShadow(x?, y?, blur?, color?) | text-shadow value | | textShadowCss(selector, x?, y?, blur?, color?) | Complete text-shadow CSS rule | | borderRadius(tl?, tr?, br?, bl?) | border-radius value | | borderRadiusCss(selector, tl?, tr?, br?, bl?) | Complete border-radius CSS rule | | flexbox(options?) | Flexbox properties | | flexboxCss(selector, options?) | Complete flexbox CSS rule | | grid(template?) | Grid properties | | gridCss(selector, template?) | Complete grid CSS rule | | animation(name, options?) | animation shorthand value | | animationCss(selector, name, options?) | Complete animation CSS rule | | keyframes(name, frames) | @keyframes rule | | transform(options?) | transform value | | transformCss(selector, options?) | Complete transform CSS rule | | cssFilter(options?) | filter value | | filterCss(selector, options?) | Complete filter CSS rule | | transition(property?, options?) | transition value | | transitionCss(selector, property?, options?) | Complete transition CSS rule | | mediaQuery(breakpoint, css, type?) | @media rule | | typography(options?) | Typography properties | | typographyCss(selector, options?) | Complete typography CSS rule | | aspectRatio(ratio) | aspect-ratio value | | aspectRatioCss(selector, ratio) | Complete aspect-ratio CSS rule | | clamp(min, preferred, max) | clamp() value | | clampFontCss(selector, min, preferred, max) | Complete fluid font-size CSS rule | | glassmorphism(options?) | Glassmorphism properties | | glassmorphismCss(selector, options?) | Complete glassmorphism CSS rule |

TypeScript Types

import type {
  ColorStop,
  Shadow,
  GridTemplate,
  Keyframe,
  GradientOptions,
  FlexboxOptions,
  AnimationOptions,
  TransformOptions,
  FilterOptions,
  TransitionOptions,
  TypographyOptions,
  GlassmorphismOptions,
  GradientDirection,
  GradientType,
  FlexDirection,
  FlexWrap,
  FlexJustify,
  FlexAlign,
  GridAutoFlow,
  TimingFunction,
  FontWeight,
} from "peasy-css";

REST API Client

The API client connects to the PeasyCSS developer API for tool discovery and content.

import { PeasyCssClient } from "peasy-css";

const client = new PeasyCssClient();

// List available tools
const tools = await client.listTools();
console.log(tools.results);

// Search across all content
const results = await client.search("minify");
console.log(results);

// Browse the glossary
const glossary = await client.listGlossary({ search: "format" });
for (const term of glossary.results) {
  console.log(`${term.term}: ${term.definition}`);
}

// Discover guides
const guides = await client.listGuides({ category: "css" });
for (const guide of guides.results) {
  console.log(`${guide.title} (${guide.audience_level})`);
}

Full API documentation at peasycss.com/developers/.

Learn More

• 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

Also Available

| Language | Package | Install | |----------|---------|---------| | Python | peasy-css | pip install "peasy-css[all]" | | Go | peasy-css-go | go get github.com/peasytools/peasy-css-go | | Rust | peasy-css | cargo add peasy-css | | Ruby | peasy-css | gem install peasy-css |

Peasy Developer Tools

Part of the Peasy Tools open-source developer ecosystem.

| Package | PyPI | npm | Description | |---------|------|-----|-------------| | peasy-pdf | PyPI | npm | PDF merge, split, rotate, compress, 21 operations — peasypdf.com | | peasy-image | PyPI | npm | Image resize, crop, convert, compress — peasyimage.com | | peasy-audio | PyPI | npm | Audio trim, merge, convert, normalize — peasyaudio.com | | peasy-video | PyPI | npm | Video trim, resize, thumbnails, GIF — peasyvideo.com | | peasy-css | PyPI | npm | CSS minify, format, analyze — peasycss.com | | peasy-compress | PyPI | npm | ZIP, TAR, gzip compression — peasytools.com | | peasy-document | PyPI | npm | Markdown, HTML, CSV, JSON conversion — peasyformats.com | | peasytext | PyPI | npm | Text case conversion, slugify, word count — peasytext.com |

License

MIT