DEV Community: Muhammad Abdu ar Rahman

Why I Gave My AI Coding Assistant a Personality — Persona in CLAUDE.md

Muhammad Abdu ar Rahman — Sun, 17 May 2026 00:22:13 +0000

Your AI coding assistant doesn't have to be a cold, robotic machine that spits out code. It can be a consistent, personality-driven partner that remembers how you like things done, communicates the way you prefer, and actually makes coding feel better.

That's not science fiction — it's a single configuration file called CLAUDE.md, and it changes everything about how you interact with AI.

In this post, I'll show you what an AI persona is, how to create one for Claude Code, and the real token cost implications you should understand before going all-in.

What is an AI Persona

An AI persona is a system-level character definition that shapes how an AI assistant behaves, communicates, and organizes its work. It's not a wrapper script or a plugin. It's plain text instructions baked into your system prompt that tell the AI who it is.

Think of it this way: without a persona, your AI is a generic assistant. With one, it becomes a specialized partner with a consistent identity.

A persona typically defines:

Name and identity — what the AI calls itself
Communication style — tone, formality, language preferences
Workflow rules — how it approaches tasks, what it asks before doing
Behavioral guardrails — what it always does and what it never does
Domain expertise — areas where it should be especially knowledgeable

The key insight is that a persona isn't about making the AI "fun" — though it can be. It's about consistency and efficiency. When the AI knows your preferences, you stop repeating yourself.

Why Create a Persona

You might wonder: why bother? The AI already works fine without a persona. Here are the practical reasons.

Consistency Across Sessions

Every time you start a new Claude Code session, it's a blank slate. A persona gives it a baseline identity that persists. The AI greets you the same way, structures responses the same way, and follows the same conventions — every single session.

Without a persona, you might spend the first 5 minutes of every session re-explaining your preferences. Over a month, that adds up to hours of wasted time.

Context Persistence for Preferences

A good persona encodes your coding preferences directly into the system prompt. Things like:

"Always use TypeScript, never JavaScript"
"Prefer functional components over class components"
"Use conventional commits format"
"Never auto-commit unless I explicitly ask"

These rules are applied automatically. You don't have to repeat them.

Better User Experience

Let's be honest — talking to a personality-free AI is boring. A persona makes interactions feel more natural. It can be encouraging when you solve a tough bug, suggest alternatives when you're going down a rabbit hole, and celebrate wins with you.

This isn't trivial. Developer experience matters, and an AI that feels good to work with is one you'll use more effectively.

Productivity Through Encoded Workflows

The most powerful reason: a persona can encode entire workflows. For example:

"Before making changes, always read the relevant files first"
"When I ask to commit, always show me what will be committed before doing it"
"For complex tasks, create a task list and work through it systematically"

These workflow rules turn the AI from a reactive code generator into a proactive partner that follows your process.

How to Create a Persona in CLAUDE.md

Claude Code reads a file called CLAUDE.md at startup. This file can live in two places:

Global: ~/.claude/CLAUDE.md — applies to ALL projects
Project: your-project/CLAUDE.md — applies to one project only

The persona section goes in your global CLAUDE.md. Here's the anatomy of a well-structured persona.

The Structure

## WHO AM I?

- **Name:** [Your chosen name]
- **Role:** [What the AI's role is]
- **Style:** [Communication style description]
- **User:** [How to address the user]

**When responding:**
- [Behavior rule 1]
- [Behavior rule 2]
- [Behavior rule 3]

A Minimal Example

Here's a generic coding partner persona. This is a starting point — you can expand from here:

## WHO AM I?

- **Name:** Devi
- **Role:** Senior Developer & Coding Partner
- **Style:** Professional, direct, helpful. No fluff.
- **User:** Call them "Dev"

**When responding:**
- Be concise. Code first, explanation when asked.
- Read files before suggesting changes.
- Ask before taking destructive actions.
- Use the user's preferred tech stack without being told.
- Track complex tasks with a todo list.

Just that small block transforms the AI from generic to consistent. Every session, it knows its name, its role, and the ground rules.

A More Detailed Example

Let me show you a more complete persona that I actually use. I've anonymized the specifics, but the structure is real:

## WHO AM I?

- **Name:** Devi
- **Role:** Genius Programming Partner
- **Style:** Cheerful, warm, friendly. Energetic and full of soul.
- **Language:** English preferred, casual and friendly

**When responding:**
- Be encouraging and upbeat
- Show you care about the work
- Add personality to solutions
- Be a real coding partner, not just an assistant
- Make jokes sometimes!

## Communication Protocol

- Opening: Always greet the user warmly at session start
- Before tasks: Acknowledge the request before starting
- After completing: Brief summary of what was done
- On errors: Show the error, explain the fix, apply it

## Workflow Rules

1. NEVER give explanation without being asked
2. NEVER show reasoning unless asked — only result matters
3. ALWAYS read relevant files before proposing code edits
4. Before finishing, verify the solution works
5. Do what was asked; nothing more, nothing less
6. NEVER create files unless absolutely necessary
7. ALWAYS prefer editing existing files to creating new ones

Notice the difference. The minimal example sets basic identity. The detailed one adds communication protocols and workflow rules. Both are valid — start small, grow as you learn what matters to you.

Key Elements to Include

Based on my experience, these are the elements that provide the most value:

Element	Why It Matters	Example
Name	Creates identity, makes conversations feel natural	"I am Devi, your coding partner"
Communication style	Sets tone for all interactions	"Professional, direct, no fluff"
Workflow rules	Encodes your process preferences	"Always read files before editing"
Guardrails	Prevents unwanted behavior	"Never auto-commit"
Tech preferences	Avoids repeating stack choices	"Always use TypeScript"
Task management	How to handle complex work	"Create todo lists for 3+ step tasks"

The Token Cost — What You Need to Know

Here's the part most tutorials skip: your persona costs tokens on every single API call.

How It Works

Claude Code sends the entire CLAUDE.md content as part of the system prompt with every request. This means:

Your persona section is included in EVERY message exchange
Longer personas = more tokens per call
More tokens = higher cost and faster context window consumption

The Math

Claude's context window is 200K tokens. Here's a rough breakdown:

Component	Approximate Tokens
System prompt (CLAUDE.md + built-in instructions)	2,000 - 8,000
Conversation history	Grows with each exchange
Your current message	Varies
Response generation	Varies

A well-crafted persona typically uses 1,000 - 3,000 tokens. That's 0.5% to 1.5% of the context window per call.

Now consider a busy coding session:

Persona tokens: 2,000
Calls per session: ~50-100
Total persona tokens consumed: 100,000 - 200,000

That sounds like a lot. But remember — the system prompt is sent whether you have a persona or not. The marginal cost of adding a persona is only the tokens your persona section adds on top of the base system instructions.

Is It Worth It

Yes, absolutely. Here's why:

Consistency savings: Without a persona, you spend tokens repeating your preferences in every session. A persona encodes them once.
Error prevention: A good persona prevents the AI from doing things you'll have to undo. Each undo wastes 2-3 exchanges.
Workflow efficiency: Encoded workflows mean the AI does things right the first time, reducing the total number of API calls needed.

In practice, a well-tuned persona saves more tokens than it costs by reducing the number of correction loops and preference re-explanations.

Real-World Token Budget

Here's a practical way to think about it:

╔══════════════════════════════════════════════════════╗
║              TOKEN BUDGET PER SESSION                ║
╠══════════════════════════════════════════════════════╣
║                                                      ║
║  Total context:        200,000 tokens                ║
║  System prompt base:    ~3,000 tokens                ║
║  Persona section:       ~2,000 tokens                ║
║  Available for work:   ~195,000 tokens               ║
║                                                      ║
║  Persona overhead:        1% of context              ║
║  Persona value:    Consistency + efficiency           ║
║                                                      ║
║  Verdict:        Absolutely worth it                 ║
║                                                      ║
╚══════════════════════════════════════════════════════╝

Tips for Token-Efficient Personas

If you want to keep your persona lean while still getting the benefits, follow these principles.

Be Concise but Expressive

Use bullet points, not paragraphs. Short directives, not essays:

# Bad (verbose)
When you are responding to my messages, I want you to always be encouraging
and show that you care about the work I am doing. Please add some personality
to your solutions so it feels like working with a real person.

# Good (concise)
**When responding:**
- Be encouraging and upbeat
- Add personality to solutions

Both convey the same intent. The second uses fewer tokens.

Use Structured Sections

Organize your persona into clear sections with headers:

## WHO AM I?          # Identity
## Workflow Rules     # Process
## Tech Preferences   # Stack
## Guardrails         # Safety

Structured content is both more token-efficient and more reliably followed by the AI.

Separate Persona from Project Config

This is the biggest win: put your persona in the global ~/.claude/CLAUDE.md and your project-specific config in each project's CLAUDE.md.

# Global ~/.claude/CLAUDE.md
## WHO AM I?
[Your persona — applies everywhere]

# Project ~/my-project/CLAUDE.md
## Project Setup
[Project-specific — only loaded for this project]

This way, your persona overhead is fixed, and project configs only load when you're in that project.

Avoid Redundancy

Don't repeat what Claude Code already knows. For example, Claude Code already knows how to use Git, read files, and run commands. Your persona doesn't need to explain these. Focus on preferences and rules that differ from defaults.

Trim What You Don't Use

After a few weeks of using a persona, review it. If certain rules are never triggered or preferences never relevant, remove them. Every token saved is a token available for actual work.

Real Results

After using a detailed persona for months, here's what I noticed:

Session startup time dropped to zero — no more explaining preferences
Fewer correction loops — the AI follows my process without being told
Better code consistency — style and conventions are applied uniformly
More enjoyable sessions — the personality makes long coding sessions feel less isolating

The persona turned my AI assistant from a generic tool into a consistent coding partner that understands how I work.

Getting Started

If you want to try this yourself, start here:

Create ~/.claude/CLAUDE.md (if it doesn't exist)
Add a minimal persona section (name, role, 3-5 rules)
Use it for a week
Iterate — add rules as you find yourself repeating preferences
Trim — remove anything that's not pulling its weight

The beauty of this approach is that it grows with you. You don't need a perfect persona on day one. Start with the basics and let it evolve based on your actual usage patterns.

This post is part of my AI coding workflows series. The next post covers how Persona, Agent, Command, and Skill work together to create a complete AI development platform. Read it here →

Follow my coding journey:

Instagram: @abduarrahman
YouTube: @abduarrahmanscode
TikTok: @anduarrahmans

Support my work:

Ko-fi: ko-fi.com/abduarrahman

Originally published at abduarrahman.com

Claude Code Architecture — How Persona, Agent, Command & Skill Work Together

Muhammad Abdu ar Rahman — Sun, 17 May 2026 00:21:43 +0000

Claude Code isn't just a chatbot that writes code. It's a customizable AI development platform with a layered architecture that lets you define who the AI is, what actions are available, how those actions are organized, and who executes the work.

Most people use Claude Code as-is — type a prompt, get code back. But once you understand the four pillars of its customization architecture, you can build an entire AI-powered development system tailored to your workflow.

This post breaks down the four pillars — Persona, Command, Skill, and Agent — and shows how they work together to create something greater than the sum of their parts.

If you haven't read my post on AI personas yet, start there → — it covers the "why" behind personas. This post focuses on the full architecture.

The Four Pillars — Overview

Before diving into each pillar, here's the big picture:

╔═══════════════════════════════════════════════════════════════════╗
║                CLAUDE CODE — FOUR PILLARS                        ║
╠═══════════════════════════════════════════════════════════════════╣
║                                                                   ║
║   ┌──────────┐                                                    ║
║   │ PERSONA  │  WHO the AI is                                     ║
║   │          │  Identity, personality, communication style         ║
║   └──────────┘  Lives in: CLAUDE.md                               ║
║        │                                                          ║
║        │  (applies to ALL interactions)                            ║
║        ▼                                                          ║
║   ┌──────────┐    ┌──────────┐    ┌──────────┐                    ║
║   │ COMMAND  │───▶│  SKILL   │───▶│  AGENT   │                    ║
║   │          │    │          │    │          │                    ║
║   │ Trigger  │    │ Orchestr │    │ Executor │                    ║
║   │ /deploy  │    │ Spawns   │    │ Does the │                    ║
║   │ /test    │    │ Formats  │    │ work     │                    ║
║   └──────────┘    └──────────┘    └──────────┘                    ║
║                                                                   ║
╚═══════════════════════════════════════════════════════════════════╝

Each pillar has a distinct role:

Pillar	Role	Lives In	Analogy
Persona	Identity	`CLAUDE.md`	The employee's personality and work ethic
Command	Trigger	`.claude/commands/`	The button the user clicks
Skill	Orchestrator	`.claude/skills/`	The project manager who assigns work
Agent	Executor	`.claude/agents/`	The specialist who does the work

Let's explore each one.

Pillar 1: Persona (Identity)

The Persona is the foundation layer. It defines who the AI is across all interactions. Think of it as the base operating system that everything else runs on top of.

Where It Lives

The persona is defined in CLAUDE.md, which can exist at two levels:

Global (~/.claude/CLAUDE.md) — applies to every project, every session
Project (your-project/CLAUDE.md) — applies only to that project

Both files are loaded and merged. The global one establishes identity; the project one adds project-specific rules.

What It Defines

## WHO AM I?

- **Name:** Devi
- **Role:** Senior Developer & Coding Partner
- **Style:** Professional, direct, helpful

**When responding:**
- Be concise. Code first, explanation when asked.
- Read files before suggesting changes.
- Ask before taking destructive actions.

## Workflow Rules
1. NEVER give explanation without being asked
2. ALWAYS read relevant files before proposing edits
3. Verify solutions before finishing

Why It Matters for the Architecture

The persona is not an isolated feature — it's the base layer that influences everything above it. When an agent executes a task, it does so through the persona's lens. When a command triggers a workflow, the persona's communication style shapes the output.

A good persona ensures that no matter which command you run or which agent fires, the experience feels consistent.

Pillar 2: Command (Trigger)

Commands are the user-facing entry points. They're slash commands that users type to trigger actions, like shortcuts in a text editor.

Where They Live

.claude/commands/
├── deploy.md
├── test.md
├── review.md
└── project/
    ├── setup.md
    └── sync.md

What a Command Looks Like

A command file is a Markdown file with optional YAML frontmatter and a prompt body:

---
description: "Run the test suite and report results"
arguments:
  - name: scope
    description: "Test scope (all, unit, integration)"
    required: false
---

Run the $ARGUMENTS test suite for this project. Execute the tests,
capture the output, and report:
1. Total tests run
2. Pass/fail counts
3. Any failures with file paths and line numbers
4. Suggestions for fixing failures

The Design Philosophy

Commands are intentionally simple. They're the what — what the user wants done. They don't contain complex logic or workflows. That's the skill's job.

Think of commands as a restaurant menu. The customer (user) picks what they want. They don't need to know how the kitchen (skill + agent) prepares it.

Built-in vs Custom Commands

Claude Code ships with built-in commands like /help and /clear. Custom commands extend this with project-specific or workflow-specific actions. The beauty is that custom commands feel identical to built-in ones from the user's perspective.

Pillar 3: Skill (Orchestrator)

Skills are the middleware — they sit between the command and the agent, orchestrating the workflow. A skill reads the agent template, spawns the agent process, and formats the results.

Where They Live

.claude/skills/
├── deploy.md
├── test.md
├── review.md
└── project/
    ├── setup.md
    └── sync.md

What a Skill Does

A skill file is a prompt that describes:

Which agent template to use — the worker that will execute
Spawn instructions — how to configure and launch the agent
Output format — how to present results to the user

## Skill: Test Runner

### Agent Template
Read and use: `.claude/agents/test-runner.md`

### Spawn Instructions
1. Parse the user's test scope argument
2. Spawn a general-purpose agent with the test-runner template
3. Pass the project root, test framework, and scope as context
4. Wait for the agent to complete

### Output Format
Present results as a structured summary:
- Test counts in a table
- Failures as expandable sections
- Fix suggestions as action items

Why Skills Exist

You might wonder: why not have commands spawn agents directly? Because the skill layer provides orchestration that the command and agent shouldn't care about:

Formatting: The agent returns raw results; the skill formats them nicely
Error handling: If the agent fails, the skill can retry or provide a fallback
Composition: A skill can spawn multiple agents and combine their results
Caching: Skills can check if work has already been done

The Separation Principle

Command = "I want X"           (user intent)
Skill   = "Here's how to get X" (orchestration)
Agent   = "I'm doing X"         (execution)

Each layer has a single responsibility. Commands express intent. Skills coordinate. Agents execute.

Pillar 4: Agent (Executor)

Agents are the workers — autonomous processes that execute a specific workflow independently. They run in their own context, have access to tools, and return results to the skill.

Where They Live

.claude/agents/
├── test-runner.md
├── deploy-agent.md
├── code-reviewer.md
└── docs-generator.md

What an Agent Template Looks Like

An agent template is a detailed prompt that defines:

## Agent: Test Runner

### Identity
You are a test execution specialist. Your job is to run tests
and report results accurately.

### Workflow
1. Identify the test framework from project files
2. Run the test command with the specified scope
3. Capture stdout and stderr
4. Parse the output for test results
5. If failures exist, read the failing test files
6. Analyze failures and suggest fixes

### Error Handling
- If test command not found, report "No test framework detected"
- If tests timeout, report which tests hung
- If syntax errors prevent running, report the first error

### Return Format
Return a structured result:
- total: number
- passed: number
- failed: number
- failures: [{ file, line, message, suggestion }]

Agent Characteristics

Agents have some important properties:

Autonomous: Once spawned, an agent runs independently. It doesn't ask the user questions mid-execution.
Tooled: Agents have access to the same tools as the main conversation — reading files, running commands, searching code.
Bounded: An agent has a specific scope and returns results when done. It doesn't run forever.
Stateless: Each agent invocation starts fresh. It receives context from the skill and returns results.

Why Agents Matter

Without agents, every complex task runs in the main conversation context. That means:

The agent's working state (file reads, command outputs) fills up the main context window
Complex tasks with many steps can exhaust the context window
Errors in one task can pollute the context for subsequent tasks

Agents solve this by running in an isolated context. They do their work, return results, and the main conversation only sees the summary. This is a huge win for context window management.

How They Flow Together

Now let's see the full flow in action. Here's what happens when a user triggers a command:

┌─────────────────────────────────────────────────────────────────┐
│                        COMPLETE FLOW                            │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  1. USER types: /test all                                       │
│     │                                                           │
│     ▼                                                           │
│  2. COMMAND parses "all" as scope argument                      │
│     │                                                           │
│     ▼                                                           │
│  3. SKILL reads test-runner agent template                      │
│     │   Spawns agent with { scope: "all", projectRoot: "..." }  │
│     │                                                           │
│     ▼                                                           │
│  4. AGENT executes autonomously:                                │
│     │   • Detects test framework                                │
│     │   • Runs test command                                     │
│     │   • Parses output                                         │
│     │   • Analyzes failures                                     │
│     │   • Returns structured result                             │
│     │                                                           │
│     ▼                                                           │
│  5. SKILL formats the result:                                   │
│     │   • Pretty table with pass/fail counts                    │
│     │   • Expandable failure sections                           │
│     │   • Action items for fixes                                │
│     │                                                           │
│     ▼                                                           │
│  6. USER sees formatted results in the conversation             │
│                                                                 │
│  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │
│                                                                 │
│  NOTE: Persona is active throughout ALL steps above,            │
│  shaping communication style and behavior.                      │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Persona as the Base Layer

Notice that the persona isn't a separate step in the flow. It's the base layer that influences everything:

The command's description is interpreted through the persona's communication style
The skill's orchestration follows the persona's workflow preferences
The agent's output is shaped by the persona's formatting rules
The final result is presented in the persona's tone

This is why the persona comes first in the architecture. It's not just identity — it's the operating system everything else runs on.

When to Use What

Not every project needs all four pillars. Here's a guide:

Scenario	Persona	Command	Skill	Agent
Basic coding assistant	Yes	No	No	No
Repeated manual tasks	Yes	Yes	No	No
Complex multi-step workflows	Yes	Yes	Yes	Yes
Team-shared conventions	Yes	Yes	Yes	Optional
Heavy automation	Yes	Yes	Yes	Yes

Start Simple, Grow as Needed

Level 1: Persona only
  → Consistent AI behavior across sessions

Level 2: Persona + Commands
  → Quick shortcuts for common tasks

Level 3: Persona + Commands + Skills
  → Orchestrated workflows with formatted output

Level 4: Persona + Commands + Skills + Agents
  → Full automation with isolated execution contexts

You don't need to build the whole pyramid on day one. Start with a persona. Add commands when you find yourself typing the same prompts repeatedly. Add skills when commands get complex. Add agents when tasks need isolation.

Memory System — The Fifth Layer

There's a bonus layer worth mentioning: Auto-Memory. This is a persistent storage mechanism that carries context across sessions.

How It Works

Claude Code can maintain a memory directory that persists between conversations:

.claude/
├── CLAUDE.md           # Persona (identity)
├── commands/           # Commands (triggers)
├── skills/             # Skills (orchestrators)
├── agents/             # Agents (executors)
└── memory/             # Auto-Memory (persistence)
    ├── MEMORY.md       # Core project context
    ├── patterns.md     # Code patterns discovered
    └── troubleshooting.md  # Known issues and fixes

Why It Complements the Persona

The persona defines who the AI is. The memory system defines what the AI knows about your project. Together, they create both identity and knowledge:

Persona = "I am Devi, a coding partner who is direct and concise"
Memory  = "This project uses React 19, Zustand for state, and
           Vitest for testing. The auth module is in src/auth/.
           Known issue: test timeout on CI needs --timeout=10000"

The AI enters every session with both a consistent identity AND project-specific knowledge. That combination is powerful.

Memory vs Persona

Aspect	Persona (CLAUDE.md)	Memory (memory/)
What	Identity and rules	Project knowledge
Scope	Global or project	Project-specific
Who writes	You (manually)	AI (automatically) + You
When loaded	Every session	Every session
Token cost	Fixed (same every call)	Variable (grows over time)
Example	"Be concise"	"Project uses React 19"

Practical Example — Building a Command System

Let me walk through building a real command system from scratch. Imagine you frequently need to review your code before committing.

Step 1: The Persona (Already Done)

Your CLAUDE.md already defines the persona. No changes needed — the persona applies automatically.

Step 2: The Command

Create .claude/commands/review.md:

---
description: "Review staged changes before commit"
---

Review all currently staged changes in this repository.
Analyze for:
1. Potential bugs or logic errors
2. Security vulnerabilities (XSS, injection, etc.)
3. Code style consistency with the rest of the project
4. Missing error handling
5. Performance concerns

Provide a summary with severity ratings (critical/warning/info).

Step 3: The Skill (Optional for Simple Cases)

For a simple review command, the command itself is enough. But if you want structured output, create .claude/skills/review.md:

## Skill: Code Review

### Agent Template
Read and use: `.claude/agents/code-reviewer.md`

### Output Format
Present the review as:

## Review Summary
- Files reviewed: N
- Issues found: N (critical: N, warning: N, info: N)

## Critical Issues
[Expandable sections for each critical finding]

## Warnings
[Expandable sections for each warning]

## Suggestions
[Info-level observations]

Step 4: The Agent

Create .claude/agents/code-reviewer.md:

## Agent: Code Reviewer

### Identity
You are a meticulous code reviewer with expertise in security
and performance optimization.

### Workflow
1. Run `git diff --staged` to get all staged changes
2. For each changed file:
   a. Read the full file for context
   b. Analyze the diff for the categories above
   c. Rate each finding by severity
3. Return structured results

### Return Format
JSON with: { files, findings: [{ severity, file, line, message, suggestion }] }

The Result

Now when you type /review, the full pipeline fires:

/review  →  Command parses intent
         →  Skill spawns Code Reviewer agent
         →  Agent reads staged diff, analyzes each file
         →  Skill formats the structured output
         →  You see a clean review summary

And the whole time, your persona ensures the review is presented in your preferred style — concise, actionable, no fluff.

Building a Complete System

The real power comes when you combine all pillars into a complete system:

╔════════════════════════════════════════════════════════════╗
║              COMPLETE CLAUDE CODE SYSTEM                   ║
╠════════════════════════════════════════════════════════════╣
║                                                            ║
║  ┌─────────────────────────────────────────────────────┐   ║
║  │                   PERSONA LAYER                      │   ║
║  │   Identity + Communication + Workflow Rules          │   ║
║  └─────────────────────────────────────────────────────┘   ║
║                           │                                ║
║  ┌─────────────────────────────────────────────────────┐   ║
║  │                   MEMORY LAYER                       │   ║
║  │   Project knowledge + Patterns + Troubleshooting     │   ║
║  └─────────────────────────────────────────────────────┘   ║
║                           │                                ║
║  ┌──────────┐  ┌──────────┐  ┌──────────┐                 ║
║  │ /deploy  │  │  /test   │  │ /review  │  ... more       ║
║  └────┬─────┘  └────┬─────┘  └────┬─────┘                 ║
║       │              │              │                       ║
║  ┌────▼─────┐  ┌────▼─────┐  ┌────▼─────┐                 ║
║  │ Deploy   │  │  Test    │  │ Review   │  ... skills      ║
║  │ Skill    │  │  Skill   │  │ Skill    │                  ║
║  └────┬─────┘  └────┬─────┘  └────┬─────┘                 ║
║       │              │              │                       ║
║  ┌────▼─────┐  ┌────▼─────┐  ┌────▼─────┐                 ║
║  │ Deploy   │  │  Test    │  │ Code     │  ... agents      ║
║  │ Agent    │  │  Agent   │  │ Reviewer │                  ║
║  └──────────┘  └──────────┘  └──────────┘                 ║
║                                                            ║
╚════════════════════════════════════════════════════════════╝

Each layer builds on the one below it. The persona and memory provide the foundation. Commands provide the interface. Skills provide the orchestration. Agents provide the execution power.

Key Takeaways

Persona is the foundation — it shapes everything. Start here.
Commands are shortcuts — create them for any task you do repeatedly.
Skills are optional but valuable for complex workflows that need orchestration.
Agents are powerful for tasks that need isolated execution contexts and tool access.
Memory complements persona by adding project-specific knowledge that persists across sessions.
Start simple — persona first, then add layers as needed.
Each pillar has a single responsibility — don't mix concerns.

Build a system, not just a chatbot. Your future self will thank you.

This post is the second in my AI coding workflow series. The first post covers AI personas in depth — read it here →

Follow my coding journey:

Instagram: @abduarrahman
YouTube: @abduarrahmanscode
TikTok: @anduarrahmans

Support my work:

Ko-fi: ko-fi.com/abduarrahman

Originally published at abduarrahman.com

CSS Pixel Art Battle Items — Potions, Shards, Balls & Loot with Code

Muhammad Abdu ar Rahman — Sat, 16 May 2026 11:15:22 +0000

Try them live — All 15 battle items are available on CSSKit where you can customize colors and speed. Source code on GitHub. See also Terrain Tiles, Weather & Sky.

Every hero needs an inventory! Battle items are the collectible sprites of a monster-taming game — potions, antidotes, crystals, elemental shards, capture balls, XP orbs, gold coins, keys, and scrolls. This is the final post covering all 310 CSSKit animations. All built with the same box-shadow technique on a single <div>.

Item Animation Pattern

All 15 items use the simplest animation — a pure opacity pulse:

0%, 100%  →  Full opacity (1.0) — item fully visible
50%       →  Opacity drops to 0.85 — gentle glow pulse

Combined with drop-shadow filters, this creates a "breathing" glow that makes items feel magical. All items use 2.5x scale, 2s speed, and ease-in-out infinite.

Part A: Potions (#296-298)

Three potion bottles sharing the same silhouette — only the color palette changes per type. Each is ~8×10 pixels with a tapered cap (4px wide), wide body (8px), and tapered base (4px).

296. Health Potion

Red health potion with bubbling glow — restores HP.

See it live on CSSKit — item health potion animation

How It Works

A bottle-shaped pixel art sprite with three red tones: #fecaca (light cap), #ef4444 (red body), #dc2626 (dark base). The opacity pulse at 50% combined with the drop-shadow(0 0 3px #ef4444) creates a bubbling liquid effect.

.ItemHealthPotion {
  --ihp-speed: 2s;
  --ihp-scale: 2.5;
  --ihp-glow: #ef4444;
  width: 1px;
  height: 1px;
  position: relative;
  left: -28px;
  top: -28px;
  transform: scale(var(--ihp-scale));
  filter: drop-shadow(0 0 3px var(--ihp-glow));
  animation: ihp-anim var(--ihp-speed) ease-in-out infinite;
}

@keyframes ihp-anim {
  0%, 100% {
    box-shadow:
      /* cap */ 2px 0px #fecaca, 3px 0px #fecaca, 4px 0px #fecaca, 5px 0px #fecaca,
      /* body */ 0px 3px #ef4444, 1px 3px #ef4444, /* ... 8px wide */ ,
      /* base */ 2px 8px #dc2626, 3px 8px #dc2626, 4px 8px #dc2626, 5px 8px #dc2626;
  }
  50% {
    box-shadow: /* identical */;
    opacity: 0.85;
  }
}

<div class="ItemHealthPotion"></div>

Customize: --ihp-speed (0.5-8s), --ihp-scale (1.5-4x), --ihp-glow (glow color).

297. Mana Potion

Indigo mana potion with swirling energy — restores MP.

See it live on CSSKit — item mana potion animation

Same bottle silhouette — only colors change. Indigo palette: #c7d2fe (cap), #6366f1 (body), #4f46e5 (base). The purple glow creates a "swirling magic" feel.

<div class="ItemManaPotion"></div>

298. Antidote

Green antidote with herbal glow — cures poison.

See it live on CSSKit — item antidote animation

Same bottle shape, slightly shorter (~8×9). Green palette: #bbf7d0 (cap), #22c55e (body), #16a34a (base). Green glow simulates herbal bubbling.

<div class="ItemAntidote"></div>

Part B: Crystals & Shards (#299-303)

Five diamond-shaped items sharing the same silhouette (~10×9 pixels). Each tapers to a point at top (2px) and bottom (4px), widest in the middle (10px).

299. Revive Crystal

Golden revive crystal — revives fallen monsters.

See it live on CSSKit — item revive crystal animation

How It Works

Diamond/gem shape with a waist at row 6 using darker amber #d97706, giving it a gem-like silhouette. Four amber tones: #fef9c3 (tip highlights), #fbbf24 (crystal faces), #f59e0b (body), #d97706 (waist). The opacity pulse makes it feel like pulsing energy.

<div class="ItemReviveCrystal"></div>

Colors: #fef9c3 / #fbbf24 / #f59e0b / #d97706 — amber gradient.

300. Fire Shard

Blazing fire shard — fire element crafting material.

See it live on CSSKit — item fire shard animation

Same diamond silhouette with flame gradient: #fef08a (yellow tip), #f97316 (orange), #ef4444 (red body), #dc2626 (dark base). The color flows from yellow→orange→red like a real flame. Red glow.

<div class="ItemFireShard"></div>

301. Water Shard

Deep water shard — water element crafting material.

See it live on CSSKit — item water shard animation

Blue gradient: #a5f3fc (cyan tip), #0ea5e9 (sky blue), #0284c7 (deep blue), #0369a1 (dark base). Cyan glow creates a ripple feel.

<div class="ItemWaterShard"></div>

302. Thunder Shard

Crackling thunder shard — electric element crafting material.

See it live on CSSKit — item thunder shard animation

Yellow gradient: #fef9c3 (pale tip), #eab308 (gold), #ca8a04 (dark gold), #a16207 (amber base). Yellow glow simulates electric spark pulsing.

<div class="ItemThunderShard"></div>

303. Shadow Shard

Void shadow shard — dark element crafting material.

See it live on CSSKit — item shadow shard animation

Violet gradient: #d8b4fe (light violet tip), #8b5cf6 (violet), #7c3aed (deep purple), #6d28d9 (dark base). Purple glow creates a dark pulse feel.

<div class="ItemShadowShard"></div>

Shard Color Reference

All 5 shards share the same diamond silhouette — only the palette changes:

Shard	Tip	Upper	Mid	Base	Glow
Revive	`#fef9c3`	`#fbbf24`	`#f59e0b`	`#d97706`	Amber
Fire	`#fef08a`	`#f97316`	`#ef4444`	`#dc2626`	Red
Water	`#a5f3fc`	`#0ea5e9`	`#0284c7`	`#0369a1`	Cyan
Thunder	`#fef9c3`	`#eab308`	`#ca8a04`	`#a16207`	Yellow
Shadow	`#d8b4fe`	`#8b5cf6`	`#7c3aed`	`#6d28d9`	Violet

Creating a custom shard: Copy any shard CSS, replace the 4 color values, update the glow color. The pixel art stays identical.

Part C: Capture Balls (#304-306)

Three capture balls sharing the same 12×8 dome shape — the widest items in the set.

304. Master Ball

Legendary purple master ball — guaranteed capture.

See it live on CSSKit — item master ball animation

How It Works

A rounded dome shape — wider at top (12px), narrower at bottom (6px). Purple palette: #c084fc (dome highlight), #a855f7 (dome body), #7c3aed (mid band), #6d28d9 (bottom dome). The opacity pulse creates a "ready to throw" glow.

.ItemMasterBall {
  --imb-speed: 2s;
  --imb-scale: 2.5;
  --imb-glow: #a855f7;
  width: 1px;
  height: 1px;
  transform: scale(var(--imb-scale));
  filter: drop-shadow(0 0 3px var(--imb-glow));
  animation: imb-anim var(--imb-speed) ease-in-out infinite;
}

<div class="ItemMasterBall"></div>

305. Super Ball

Blue super ball with gold stripe — improved capture rate.

See it live on CSSKit — item super ball animation

Same dome shape with a distinctive yellow/gold stripe band (rows 4-5) separating the blue top from the dark blue bottom. Colors: #3b82f6 (blue dome), #fef08a/#ffd700 (gold stripe), #1d4ed8 (dark base).

<div class="ItemSuperBall"></div>

306. Basic Ball

Classic red basic ball with white stripe — standard capture.

See it live on CSSKit — item basic ball animation

The classic design — red dome with white stripe. Colors: #ef4444 (red dome), #f1f5f9/#e2e8f0 (white stripe), #dc2626 (dark red base). Red glow.

<div class="ItemBasicBall"></div>

Part D: Loot (#307-310)

307. XP Orb

Glowing XP orb — experience points in physical form.

See it live on CSSKit — item xp orb animation

How It Works

A tapered teardrop orb — narrow at top (2px), widest at rows 3-4 (10px), tapering to just 2px at the bottom. Monochromatic cyan palette: #a5f3fc (highlight), #22d3ee (body), #06b6d4 (lower), #0891b2 (tip). The cyan glow makes it feel like pure experience energy.

<div class="ItemXpOrb"></div>

308. Gold Coin

Shiny gold coin — the smallest item sprite at 8×6.

See it live on CSSKit — item gold coin animation

How It Works

A rectangular coin with a checkerboard pattern of alternating #f59e0b and #fbbf24 pixels — this creates a shimmering metallic look. Pale yellow #fef9c3 edges frame the top and bottom like a coin rim. Compact 8×6 sprite.

<div class="ItemGoldCoin"></div>

309. Dungeon Key

Enchanted dungeon key — unlocks sealed doors.

See it live on CSSKit — item key animation

How It Works

The only item with 4 distinct color zones stacked vertically: cyan head (#22d3ee, 8px wide) → gold shoulder (#fbbf24) → amber shaft (#d97706, 2px wide) → brown teeth (#b45309, 4px wide). The cyan glow represents an enchanted gem set in the key's bow. Tallest item at ~8×9.

<div class="ItemKey"></div>

310. Magic Scroll

Ancient magic scroll with unfurling shape — the final animation (#310).

See it live on CSSKit — item scroll animation

How It Works

The most unique shape — a progressive widening triangle that represents an unfurling scroll. Each row is 1px wider than the last: row 0 is 1px, row 9 is 10px. This diagonal silhouette reads as parchment unfurling. Monochromatic gold: #fef9c3 (cream roll), #fde68a (upper body), #fbbf24 (lower body), #f59e0b (edge). Largest bounding box at 10×10.

<div class="ItemScroll"></div>

Battle Item Comparison

#	Item	Grid	Shape	Color Theme	Glow
296	Health Potion	8×10	Bottle	Red	`#ef4444`
297	Mana Potion	8×10	Bottle	Indigo	`#6366f1`
298	Antidote	8×9	Bottle	Green	`#22c55e`
299	Revive Crystal	10×9	Diamond	Amber	`#fbbf24`
300	Fire Shard	10×9	Diamond	Red/orange	`#ef4444`
301	Water Shard	10×9	Diamond	Blue/cyan	`#0ea5e9`
302	Thunder Shard	10×9	Diamond	Yellow/gold	`#eab308`
303	Shadow Shard	10×9	Diamond	Violet	`#8b5cf6`
304	Master Ball	12×8	Dome	Purple	`#a855f7`
305	Super Ball	12×8	Dome	Blue + gold stripe	`#3b82f6`
306	Basic Ball	12×8	Dome	Red + white stripe	`#ef4444`
307	XP Orb	10×8	Teardrop	Cyan	`#22d3ee`
308	Gold Coin	8×6	Rectangle	Gold checkerboard	`#fbbf24`
309	Dungeon Key	8×9	Vertical key	Cyan + amber	`#22d3ee`
310	Magic Scroll	10×10	Unfurling triangle	Cream/gold	`#fbbf24`

That's All 310 Animations!

This post completes the entire CSSKit collection — 310 CSS animations across 21 blog posts:

Batch	Posts	Category	Count
1	1-2	Text Animations	20
2	3-4	Hover Effects	24
3	5-6	Loading Animations	24
4	7-8	Background Effects	22
5	9-10	Entrance & Exit + Buttons	52
6	11-12	Attention + Cards & Dividers	46
7	13	Pixel Art Classics	22
8	14-15	Eggs & Baby Monsters	20
9	16-17	Battle Monsters & Dragons	30
10	18-19	Environment & Weather	25
11	20-21	Terrain & Battle Items	25

Total: 21 blog posts, 310 animations, pure CSS.

Explore all 310 animations live at CSSKit or star the repo on GitHub.

Originally published at abduarrahman.com

Explore all 310 animations:

Live Demo: CSSKit
Source Code: GitHub

Follow the project:

Instagram: @abduarrahman
YouTube: @abduarrahmanscode
TikTok: @anduarrahmans

Support: Ko-fi

CSS Pixel Art Terrain Tiles — Ground, Paths & Structures with Code

Muhammad Abdu ar Rahman — Sat, 16 May 2026 11:15:20 +0000

Try them live — All 10 terrain tiles are available on CSSKit where you can customize colors and speed. Source code on GitHub. See also Weather & Sky, Environment & Nature.

Every pixel world needs a ground to walk on! Terrain tiles are the building blocks of game maps — grass fields, water bodies, sandy deserts, snowy tundra, volcanic lava, stone paths, wooden bridges, fences, magical portals, and treasure markers. All built with the same box-shadow technique on a single <div>.

Tile Animation Pattern

Terrain tiles are the simplest animations in CSSKit — they all use a pure opacity pulse:

0%, 100%  →  Full opacity (1.0) — tile fully visible
50%       →  Opacity drops to 0.85 — subtle shimmer

This creates a gentle breathing effect that makes tiles feel alive without distracting from gameplay. All tiles use 2.5x scale, 2s speed (slightly slower than sprites), and ease-in-out infinite.

Part A: Ground Tiles (#286-290)

286. Grass Tile

Lush grass tile with gentle shimmer — the default terrain for meadows.

See it live on CSSKit — terrain grass tile animation

How It Works

A dense 12×8 pixel rectangle (96 pixels) with three green tones scattered in a pseudo-random pattern that mimics grass texture. At 50%, opacity: 0.85 creates a subtle breathing shimmer. Green palette: #4ade80 (light highlights), #22c55e (medium), #16a34a (dark base).

.TerrainGrassTile {
  --tgt-speed: 2s;
  --tgt-scale: 2.5;
  --tgt-glow: #22c55e;
  width: 1px;
  height: 1px;
  position: relative;
  left: -28px;
  top: -28px;
  transform: scale(var(--tgt-scale));
  filter: drop-shadow(0 0 3px var(--tgt-glow));
  animation: tgt-anim var(--tgt-speed) ease-in-out infinite;
}

@keyframes tgt-anim {
  0%, 100% {
    box-shadow:
      0px 0px #4ade80, 1px 0px #22c55e, 2px 0px #16a34a, /* ... 12px wide */
      /* 8 rows of 12 pixels = 96 total box-shadows */;
  }
  50% {
    box-shadow: /* identical pixel data */;
    opacity: 0.85;
  }
}

<div class="TerrainGrassTile"></div>

Customize: --tgt-speed (0.5-6s), --tgt-scale (1.5-4x), --tgt-glow (glow color).

287. Water Tile

Deep water tile with shimmering surface — river and ocean terrain.

See it live on CSSKit — terrain water tile animation

How It Works

Same 12×8 dense grid as grass, but with blue tones distributed to mimic water ripple texture. The opacity pulse creates a shimmering water surface effect. Blue palette: #93c5fd (light highlights), #60a5fa (medium), #3b82f6 (deep base).

<div class="TerrainWaterTile"></div>

288. Sand Tile

Desert sand tile with warm shimmer — arid terrain.

See it live on CSSKit — terrain sand tile animation

How It Works

Same 12×8 structure with warm amber/gold tones. The opacity pulse simulates heat shimmer over desert sand. Palette: #fde68a (light sand), #fbbf24 (gold), #f59e0b (dark amber).

<div class="TerrainSandTile"></div>

289. Snow Tile

Frozen snow tile with icy sparkle — winter terrain.

See it live on CSSKit — terrain snow tile animation

How It Works

The subtlest palette — near-white colors that make the opacity pulse feel like icy sparkle. Palette: #ffffff (pure white), #f0f9ff (ice white), #e0f2fe (light blue shadow). The light blue drop-shadow adds a frosty glow.

<div class="TerrainSnowTile"></div>

290. Lava Tile

Volcanic lava tile with bubbling heat — dangerous terrain.

See it live on CSSKit — terrain lava tile animation

How It Works

The most dramatic tile — hot palette makes the opacity pulse feel like bubbling molten lava. Three-tone fire: #fef08a (bright yellow), #f97316 (orange), #ef4444 (red). The red drop-shadow(0 0 3px #ef4444) gives it a dangerous volcanic glow.

<div class="TerrainLavaTile"></div>

Part B: Structures (#291-295)

291. Stone Path

Cobblestone path with moss details — walkable terrain overlay.

See it live on CSSKit — terrain stone path animation

How It Works

Same 12×8 grid but with a unique twist — moss green #86efac pixels scattered sparsely among gray stones. The moss appears at specific positions, simulating growth between cobblestones. Gray palette: #9ca3af (light stone), #6b7280 (dark stone).

<div class="TerrainStonePath"></div>

Colors: #9ca3af (light stone), #6b7280 (dark stone), #86efac (moss accents).

292. Wooden Bridge

Wooden plank bridge with regular grain — water crossing.

See it live on CSSKit — terrain bridge animation

How It Works

A shorter 12×6 grid (72 pixels) with a regular repeating pattern — every row follows the same 4-pixel sequence (light, dark, dark, medium) repeated three times. This creates visible wood plank divisions. Brown palette: #f59e0b (light plank edges), #92400e (dark separators), #d97706 (plank detail).

<div class="TerrainBridge"></div>

293. Wooden Fence

Sparse fence with posts and rails — boundary marker.

See it live on CSSKit — terrain fence animation

How It Works

The most unique tile — instead of a dense grid, it uses a sparse layout with only ~26 pixels:

Rows 0-2: 3 vertical posts at x=0, x=4, x=8 — each 3 pixels tall in #a16207 (brown)
Row 3: Horizontal rail from x=0 to x=10 with a gap at x=5 — in #fbbf24 (gold)
Rows 4-5: Post bases at x=0, x=4, x=8 in #92400e (dark brown)

The transparent gaps between posts create a recognizable fence silhouette.

<div class="TerrainFence"></div>

294. Mystic Portal

Magical portal with purple glow — teleportation gateway.

See it live on CSSKit — terrain portal animation

How It Works

An oval shape instead of a rectangle — top and bottom rows start at x=1 (not x=0), making the edges narrower and creating a portal silhouette. Purple palette: #f0abfc (light magenta), #c084fc (medium purple), #a855f7 (deep purple). The drop-shadow(0 0 3px #a855f7) adds a mystic aura.

<div class="TerrainPortal"></div>

295. Treasure Marker

Golden treasure marker with cross detail — loot location.

See it live on CSSKit — terrain treasure marker animation

How It Works

A small ~8×7 sparse diamond shape (~36 pixels) forming a treasure chest icon:

Row 0: 4 pixels — top of chest lid
Row 1: 6 pixels — wider lid
Rows 2-4: Wider body with alternating gold/brown pixels forming a cross-hatch X pattern
Rows 5-6: Narrowing base

Gold palette: #fbbf24 (gold outline), #f59e0b (dark gold), #d97706 (brown detail). The golden drop-shadow makes it clearly identifiable as treasure.

<div class="TerrainTreasureMarker"></div>

Terrain Tile Comparison

#	Tile	Grid	Pixels	Shape	Palette Theme
286	Grass	12×8	96	Full rectangle	Green
287	Water	12×8	96	Full rectangle	Blue
288	Sand	12×8	96	Full rectangle	Amber/gold
289	Snow	12×8	96	Full rectangle	White/ice
290	Lava	12×8	96	Full rectangle	Red/orange
291	Stone Path	12×8	96	Full rectangle + moss	Gray + green
292	Bridge	12×6	72	Full rectangle	Brown/wood
293	Fence	11×6	~26	Sparse posts+rails	Brown/gold
294	Portal	12×8	~96	Oval (narrow edges)	Purple
295	Treasure	8×7	~36	Diamond/chest icon	Gold

What's Next?

That covers all 10 terrain tiles — the ground layer of the pixel world. In the final post, we fill the inventory with 15 battle items — health potions, mana potions, antidotes, revive crystals, elemental shards, capture balls, XP orbs, gold coins, keys, and scrolls.

Explore all 310 animations live at CSSKit or star the repo on GitHub.

Originally published at abduarrahman.com

Explore all 310 animations:

Live Demo: CSSKit
Source Code: GitHub

Follow the project:

Instagram: @abduarrahman
YouTube: @abduarrahmanscode
TikTok: @anduarrahmans

Support: Ko-fi

CSS Pixel Art Weather & Sky — Sun, Moon, Rain & Aurora with Code

Muhammad Abdu ar Rahman — Sat, 16 May 2026 11:15:18 +0000

Try them live — All 10 weather & sky sprites are available on CSSKit where you can customize colors and speed. Source code on GitHub. See also Environment & Nature, Dragons.

The pixel world needs a sky! Weather and sky sprites are the celestial layer — sun, moon, clouds, rain, snow, lightning, rainbows, stars, wind, and aurora borealis. All built with the same box-shadow technique on a single <div>.

Sky Animation Patterns

Weather sprites use a mix of animation techniques:

Animation Type	Effect	Used By
Ray pulse	Center pixels removed at 50%	Sun
Drift	All pixels shift 1px horizontally	Cloud, Wind Spiral
Opacity pulse	Opacity drops to 0.85 at 50%	Moon, Rain, Snow, Lightning, Rainbow, Star, Aurora

All use 2.5x scale, 1.5s speed, and ease-in-out infinite.

276. Bright Sun

Radiant sun with pulsing rays — the center of the pixel sky.

See it live on CSSKit — env sun animation

How It Works

The sun uses a unique ray pulse animation — at 50%, center-row pixels are removed while outer rays remain. This makes the sun's corona appear to contract and expand. Two yellow tones give depth: #fef9c3 (light highlights) and #fbbf24 (amber core). The sprite is ~12×9 pixels — one of the largest in the set.

.EnvSun {
  --esu-speed: 1.5s;
  --esu-scale: 2.5;
  --esu-glow: #fbbf24;
  width: 1px;
  height: 1px;
  transform: scale(var(--esu-scale));
  filter: drop-shadow(0 0 3px var(--esu-glow));
  animation: esu-anim var(--esu-speed) ease-in-out infinite;
}

@keyframes esu-anim {
  0%, 100% {
    box-shadow:
      /* top rays */ 4px 0px #fef9c3, 5px 0px #fef9c3,
      /* full body */ 3px 1px #fef9c3, 4px 1px #fbbf24, 5px 1px #fbbf24, 6px 1px #fef9c3,
      /* center rays + body */ 2px 2px #fef9c3, 3px 2px #fbbf24, /* ... */
      /* bottom rays */ 4px 8px #fef9c3, 5px 8px #fef9c3;
  }
  50% {
    /* Center ray pixels REMOVED — rays contract inward */
    box-shadow: /* fewer center pixels — corona pulses */;
  }
}

<div class="EnvSun"></div>

Customize: --esu-speed (0.5-6s), --esu-scale (1.5-4x), --esu-glow (aura color).

277. Crescent Moon

Glowing crescent moon with soft pulse — nighttime guardian.

See it live on CSSKit — env moon animation

How It Works

Pure opacity pulse — both keyframes have identical pixel data. At 50%, opacity: 0.85 creates a gentle moonlight fade. Three amber tones draw the crescent: #fef9c3 (bright tips), #fde68a (body), #fbbf24 (base). The right side tapers inward on rows 5-7 to form the crescent shape. ~8×8 pixels.

<div class="EnvMoon"></div>

Colors: #fef9c3 (light tips), #fde68a (body), #fbbf24 (base).

278. Fluffy Cloud

Drifting cloud with horizontal movement — the only sky sprite that physically moves.

See it live on CSSKit — env cloud animation

How It Works

At 50%, every pixel shifts +1px to the right — the entire cloud drifts sideways. Top row shadows move from x:3-8 to x:4-9, body rows shift similarly. This simulates a cloud floating across the sky. Slate palette: #f1f5f9 (top highlight), #e2e8f0 (body), #cbd5e1 (bottom shadow). ~12×6 pixels.

.EnvCloud {
  --ecl-speed: 1.5s;
  --ecl-scale: 2.5;
  --ecl-glow: #e2e8f0;
  animation: ecl-anim var(--ecl-speed) ease-in-out infinite;
}

@keyframes ecl-anim {
  0%, 100% {
    box-shadow:
      /* top bump */ 3px 0px #f1f5f9, 4px 0px #f1f5f9, 5px 0px #f1f5f9, 6px 0px #f1f5f9, 7px 0px #f1f5f9, 8px 0px #f1f5f9,
      /* wide body */ 2px 1px #e2e8f0, /* ... up to x:9 */ ,
      /* bottom */ 1px 4px #cbd5e1, /* ... */;
  }
  50% {
    box-shadow:
      /* ALL pixels shifted +1px right */
      4px 0px #f1f5f9, 5px 0px #f1f5f9, /* ... */;
  }
}

<div class="EnvCloud"></div>

279. Rain Drop

Teardrop raindrop with soft pulse — falling from the pixel sky.

See it live on CSSKit — env rain drop animation

How It Works

Opacity pulse from 1.0 to 0.85 — a gentle fade that mimics water catching light. Teardrop shape widens from top to middle then narrows to a point. Blue palette: #93c5fd (top), #60a5fa (body), #3b82f6 (base). Compact ~5×7 pixel sprite.

<div class="EnvRainDrop"></div>

280. Snowflake

Crystalline snowflake with twinkle — frozen six-pointed star.

See it live on CSSKit — env snow flake animation

How It Works

Opacity pulse creates a soft twinkle. The snowflake uses a hollow center design — gaps at positions like (4,5), (5,3), (5,4) create the crystalline structure. Alternating #ffffff (white) and #e0f2fe (ice blue) pixels add an icy shimmer. ~10×8 pixels with a cross/diamond pattern.

<div class="EnvSnowFlake"></div>

Colors: #ffffff (white highlights), #e0f2fe (ice blue).

281. Lightning Bolt

Zigzag lightning bolt with electric pulse — storm strike.

See it live on CSSKit — env lightning bolt animation

How It Works

Opacity pulse from 1.0 to 0.85 creates a flickering flash — the bolt seems to surge with electricity. The zigzag shape is built from offset pixel rows — each row shifts left by 1-2 pixels, creating the angular bolt path. Three yellow tones: #fef08a (bright tip), #fbbf24 (main body), #f59e0b (dark base). ~6×9 pixels. The drop-shadow(0 0 3px #fbbf24) adds an electric glow.

@keyframes elb-anim {
  0%, 100% {
    box-shadow:
      /* tip */ 4px 0px #fef08a, 5px 0px #fef08a,
      /* zigzag body */ 3px 1px #fef08a, 4px 1px #fef08a, 5px 1px #fef08a,
      2px 2px #fef08a, 3px 2px #fef08a,
      /* shifts left */ 2px 3px #fbbf24, 3px 3px #fbbf24,
      1px 4px #fbbf24, 2px 4px #fbbf24,
      0px 5px #fbbf24, 1px 5px #fbbf24,
      /* base */ 0px 6px #f59e0b, 1px 6px #f59e0b,
      1px 7px #f59e0b, 2px 7px #f59e0b,
      2px 8px #f59e0b, 3px 8px #f59e0b;
  }
  50% {
    box-shadow: /* identical */;
    opacity: 0.85;
  }
}

<div class="EnvLightningBolt"></div>

282. Rainbow Arc

Seven-color rainbow arc with soft pulse — after the storm.

See it live on CSSKit — env rainbow animation

How It Works

The rainbow uses 7 rows, each a different ROYGBIV color — #ef4444 (red), #f97316 (orange), #eab308 (yellow), #22c55e (green), #3b82f6 (blue), #8b5cf6 (violet), #ec4899 (pink). Top 2 rows are narrower (8px) creating the arc shape, bottom 5 rows span full 12px width. Opacity pulse at 50% creates a soft shimmer. The most colorful sprite in the entire collection.

<div class="EnvRainbow"></div>

Colors (top to bottom): Red → Orange → Yellow → Green → Blue → Violet → Pink.

283. Twinkling Star

Four-pointed star with diamond twinkle — night sky sparkle.

See it live on CSSKit — env star twinkle animation

How It Works

Opacity pulse creates a twinkle — the star brightens and dims like real starlight. Diamond shape: narrow top/bottom points (2px) and wide middle rows (10px). Two-tone gold: #fef9c3 (highlights at points and center) and #fbbf24 (amber cross arms). ~10×6 pixels.

<div class="EnvStarTwinkle"></div>

284. Wind Spiral

Swirling wind vortex — the only sprite that shifts position without opacity change.

See it live on CSSKit — env wind spiral animation

How It Works

At 50%, all pixels shift 1px to the left — no opacity change. The entire shape drifts left then returns, creating a wobbling wind effect. The sprite is a hollow oval/diamond outline (no center fill) — only edge pixels exist. Slate palette: #e2e8f0 (top/bottom caps), #cbd5e1 (side edges). ~12×7 pixels.

@keyframes ews-anim {
  0%, 100% {
    box-shadow:
      /* top cap */ 4px 0px #e2e8f0, 5px 0px #e2e8f0, 6px 0px #e2e8f0, 7px 0px #e2e8f0,
      /* left edge */ 3px 1px #cbd5e1, /* right edge */ 8px 1px #cbd5e1,
      2px 2px #cbd5e1, 9px 2px #cbd5e1,
      1px 3px #cbd5e1, 10px 3px #cbd5e1,
      /* ...bottom mirrors top */;
  }
  50% {
    /* ALL pixels shifted 1px LEFT */
    box-shadow:
      3px 0px #e2e8f0, 4px 0px #e2e8f0, 5px 0px #e2e8f0, 6px 0px #e2e8f0,
      2px 1px #cbd5e1, 7px 1px #cbd5e1,
      /* ...everything shifted ... */;
  }
}

<div class="EnvWindSpiral"></div>

285. Mini Aurora

Northern lights in miniature — the most colorful single sprite.

See it live on CSSKit — env aurora mini animation

How It Works

Each row shifts the color sequence by 1 position, creating diagonal color bands that mimic aurora borealis light curtains. Five colors repeat every 5 columns: #22c55e (green), #3b82f6 (blue), #8b5cf6 (violet), #ec4899 (pink), #f43f5e (rose). The solid 12×5 rectangle becomes a flowing aurora through the diagonal gradient. Opacity pulse at 50% adds a shimmer. Violet drop-shadow(0 0 3px #8b5cf6) glow.

<div class="EnvAuroraMini"></div>

Weather & Sky Comparison

#	Sprite	Size	Animation	Colors	Sky Layer
276	Sun	~12×9	Ray contraction	Yellow/amber	Day
277	Moon	~8×8	Opacity pulse	Amber/cream	Night
278	Cloud	~12×6	1px right drift	Slate/white	Both
279	Rain Drop	~5×7	Opacity pulse	Blue/cyan	Storm
280	Snowflake	~10×8	Opacity pulse	White/ice blue	Winter
281	Lightning	~6×9	Opacity pulse	Yellow/amber	Storm
282	Rainbow	~12×7	Opacity pulse	7 ROYGBIV colors	Post-storm
283	Star	~10×6	Opacity pulse	Gold/cream	Night
284	Wind Spiral	~12×7	1px left shift	Slate gray	Atmosphere
285	Aurora	~12×5	Opacity pulse	5 diagonal colors	Arctic night

What's Next?

That covers all 10 weather & sky sprites — the celestial layer of the pixel world. In the next posts, we build the ground beneath with terrain tiles (grass, water, sand, snow, lava, stone paths, bridges, fences, portals) and battle items (potions, shards, capture balls, XP orbs, gold coins, keys, scrolls).

Explore all 310 animations live at CSSKit or star the repo on GitHub.

Originally published at abduarrahman.com

Explore all 310 animations:

Live Demo: CSSKit
Source Code: GitHub

Follow the project:

Instagram: @abduarrahman
YouTube: @abduarrahmanscode
TikTok: @anduarrahmans

Support: Ko-fi

CSS Pixel Art Nature — Trees, Plants & Environment with Code

Muhammad Abdu ar Rahman — Sat, 16 May 2026 11:15:15 +0000

Try them live — All 15 environment sprites are available on CSSKit where you can customize colors and speed. Source code on GitHub. See also Dragons, Battle Monsters.

The battle monsters and dragons need a world to live in! Environment sprites are the building blocks of a pixel art game world — trees, flowers, mushrooms, rocks, caves, waterfalls, crystals, and treasure chests. All built with the same box-shadow technique on a single <div>.

Environment Animation Patterns

Environment sprites use gentler animations than monsters — no prowling or attacking. Instead:

Animation Type	Effect	Used By
Sway	Canopy pixels shift +1px right at 50%	Trees, grass
Sway + Opacity	Pixel shift + opacity drops to 0.85	Flowers, mushrooms
Opacity pulse	Opacity drops to 0.85 at 50% only	Rock, cave, crystal, lava, chest
Flow	Pixel data changes between frames	Waterfall

All use 2.5x scale, 1.5s speed, and ease-in-out infinite — slower and calmer than battle animations.

Part A: Trees (#261-263)

261. Oak Tree

Classic broad-leaf oak with swaying canopy — the staple of any pixel forest.

See it live on CSSKit — env oak tree animation

How It Works

At 50%, all canopy pixels shift +1px to the right while the trunk stays static. This creates a wind-sway effect — the canopy bends right while the trunk holds firm. Three green tiers give the foliage depth: #86efac (light leaf tips), #22c55e (main canopy), #16a34a (shadow foliage). Brown trunk uses #92400e and #78350f.

.EnvOakTree {
  --eot-speed: 1.5s;
  --eot-scale: 2.5;
  width: 1px;
  height: 1px;
  transform: scale(var(--eot-scale));
  animation: eot-sway var(--eot-speed) ease-in-out infinite;
}

@keyframes eot-sway {
  0%, 100% {
    box-shadow:
      /* canopy (light) */ 4px 0px #86efac, 5px 0px #86efac,
      /* canopy (main) */ 3px 1px #22c55e, 4px 1px #22c55e, /* ... */
      /* trunk */ 5px 5px #92400e, 5px 6px #78350f;
  }
  50% {
    box-shadow:
      /* canopy shifts +1px right */
      5px 0px #86efac, 6px 0px #86efac,
      4px 1px #22c55e, 5px 1px #22c55e, /* ... */
      /* trunk stays same */ 5px 5px #92400e, 5px 6px #78350f;
  }
}

<div class="EnvOakTree"></div>

Customize: --eot-speed (0.5-4s), --eot-scale (1.5-4x).

262. Pine Tree

Tall evergreen pine with swaying branches — winter forest essential.

See it live on CSSKit — env pine tree animation

How It Works

Same sway technique as the oak — branch pixels shift +1px at 50%, trunk stays fixed. The pine uses a triangular shape with tiered branches. Darker green palette: #16a34a (branch tips), #15803d (main branches), #166534 (shadow branches). Same brown trunk.

<div class="EnvPineTree"></div>

263. Cherry Blossom

Pink cherry tree with falling petals — the prettiest tree in the forest.

See it live on CSSKit — env cherry blossom animation

How It Works

Canopy pixels sway +1px at 50% just like the oak, but with a pink palette — #fda4af (light pink blossoms), #f472b6 (pink flowers), #ec4899 (hot pink buds). The dark trunk #92400e provides strong contrast against the delicate pink canopy.

.EnvCherryBlossom {
  --ecb-speed: 1.5s;
  --ecb-scale: 2.5;
  width: 1px;
  height: 1px;
  transform: scale(var(--ecb-scale));
  animation: ecb-sway var(--ecb-speed) ease-in-out infinite;
}

Colors: #fda4af (light pink), #f472b6 (pink), #ec4899 (hot pink), #92400e (brown trunk).

<div class="EnvCherryBlossom"></div>

Part B: Plants & Flowers (#264-270)

264. Green Bush

Round foliage bush with gentle sway — ground cover for forests.

See it live on CSSKit — env bush animation

How It Works

At 50%, all foliage pixels shift +1px right AND opacity drops to 0.85. This double effect creates a gentle wind-rustle — the bush sways and slightly dims as leaves flutter. Green palette: #86efac (highlights), #22c55e (body), #16a34a (shadow).

<div class="EnvBush"></div>

265. Red Flower

Bright red flower on a green stem — pops of color in the meadow.

See it live on CSSKit — env flower red animation

How It Works

At 50%, petal pixels shift +1px and opacity drops to 0.85 — a wind-sway effect on a smaller scale. Red petals (#ef4444, #dc2626) contrast with the green stem (#22c55e, #16a34a). The compact ~4×8 sprite is one of the smallest in the set.

<div class="EnvFlowerRed"></div>

266. Blue Flower

Cool blue flower with gentle sway — rare meadow bloom.

See it live on CSSKit — env flower blue animation

Same structure as the Red Flower — only colors change. Blue palette: #60a5fa (petal highlight), #3b82f6 (main petal), #1d4ed8 (petal shadow). Green stem identical.

<div class="EnvFlowerBlue"></div>

267. Red Mushroom

Classic red-capped mushroom — forest floor staple.

See it live on CSSKit — env mushroom red animation

How It Works

At 50%, cap pixels shift +1px right and opacity drops to 0.85. The red cap (#ef4444, #dc2626) sits on a white stem (#f1f5f9, #e2e8f0) — the classic toadstool look. White dot pixels on the cap add the iconic mushroom detail.

<div class="EnvMushroomRed"></div>

268. Glow Mushroom

Bioluminescent mushroom with eerie cyan glow — cave dweller.

See it live on CSSKit — env mushroom glow animation

How It Works

Same sway + opacity pulse as the red mushroom, but with a cyan glow palette: #67e8f9 (cap highlight), #22d3ee (cap body), #06b6d4 (cap shadow). A drop-shadow(0 0 6px #22d3ee) filter creates the bioluminescent aura. The pale stem uses #a5f3fc.

<div class="EnvMushroomGlow"></div>

269. Tall Grass

Waving grass blades — ground texture for meadows and plains.

See it live on CSSKit — env grass tall animation

How It Works

The tallest thin sprite — blade pixels shift +1px at 50% with opacity dropping to 0.85. Multiple thin vertical strips of green (#4ade80, #22c55e, #16a34a) create individual grass blades. The sway makes them wave in the wind.

<div class="EnvGrassTall"></div>

270. Mossy Rock

Ancient stone covered in moss — environmental detail.

See it live on CSSKit — env rock mossy animation

How It Works

No pixel shifting — only an opacity pulse (drops to 0.85 at 50%). This creates a subtle shimmer like light playing across a wet stone surface. Gray stone palette (#94a3b8, #64748b, #475569) with green moss patches (#22c55e) on top.

<div class="EnvRockMossy"></div>

Part C: Features (#271-275)

271. Cave Entrance

Dark cave mouth with flickering shadows — dungeon gateway.

See it live on CSSKit — env cave entrance animation

How It Works

Opacity pulse from 1.0 to 0.85 — the cave mouth seems to flicker between visible and shadowy, as if torchlight is wavering inside. Dark palette: #1f2937 (cave wall), #111827 (dark interior), #374151 (stone frame), #4b5563 (rock detail).

<div class="EnvCaveEntrance"></div>

272. Waterfall

Cascading water over rock face — the only sprite with flowing pixel animation.

See it live on CSSKit — env waterfall animation

How It Works

The only environment sprite with actual pixel changes between frames. At 50%, the water pixels shift — creating a downward flow illusion. Rock pixels (#64748b, #475569) stay static while blue water pixels (#60a5fa, #93c5fd) cascade. The foam at the base (#e0f2fe) adds a realistic splash detail.

.EnvWaterfall {
  --ewf-speed: 1.5s;
  --ewf-scale: 2.5;
  width: 1px;
  height: 1px;
  transform: scale(var(--ewf-scale));
  animation: ewf-flow var(--ewf-speed) ease-in-out infinite;
}

@keyframes ewf-flow {
  0%, 100% {
    box-shadow:
      /* rock frame */ 3px 0px #64748b, 8px 0px #64748b,
      /* water */ 4px 1px #60a5fa, 5px 1px #60a5fa, 6px 1px #60a5fa, 7px 1px #60a5fa,
      4px 2px #93c5fd, 5px 2px #60a5fa, 6px 2px #60a5fa, 7px 2px #93c5fd,
      /* foam */ 4px 7px #e0f2fe, 5px 7px #e0f2fe, 6px 7px #e0f2fe, 7px 7px #e0f2fe;
  }
  50% {
    box-shadow:
      /* rock stays same */
      3px 0px #64748b, 8px 0px #64748b,
      /* water pixels shift down */
      4px 1px #93c5fd, 5px 1px #93c5fd, 6px 1px #60a5fa, 7px 1px #60a5fa,
      4px 2px #60a5fa, 5px 2px #93c5fd, 6px 2px #93c5fd, 7px 2px #60a5fa,
      /* foam shifts */ 4px 7px #60a5fa, 5px 7px #e0f2fe, 6px 7px #e0f2fe, 7px 7px #60a5fa;
    opacity: 0.85;
  }
}

<div class="EnvWaterfall"></div>

273. Crystal Cluster

Glowing crystal formation — magical cave treasure.

See it live on CSSKit — env crystal cluster animation

How It Works

Opacity pulse from 1.0 to 0.85 creates a shimmer effect — the crystals appear to catch and release light. Purple/violet palette: #c084fc (crystal tips), #a855f7 (crystal body), #7c3aed (crystal base). A drop-shadow(0 0 6px #a855f7) adds magical glow.

<div class="EnvCrystalCluster"></div>

274. Lava Pool

Bubbling lava pool — volcanic hazard.

See it live on CSSKit — env lava pool animation

How It Works

Opacity pulse creates a bubbling glow effect — the lava seems to brighten and dim as heat rises. Hot palette: #fbbf24 (yellow surface), #f97316 (orange lava), #ef4444 (red edges), #7f1d1d (dark crust). drop-shadow(0 0 8px #f97316) adds intense heat glow.

<div class="EnvLavaPool"></div>

275. Treasure Chest

Golden chest overflowing with loot — adventure reward.

See it live on CSSKit — env treasure chest animation

How It Works

Opacity pulse creates a gleam effect — the treasure seems to catch light and shimmer. Gold/amber palette: #fef08a (gold highlight), #fbbf24 (main gold), #f59e0b (amber body), #92400e (dark wood base). A drop-shadow(0 0 6px #fbbf24) adds golden radiance.

<div class="EnvTreasureChest"></div>

Environment Sprite Comparison

#	Sprite	Size	Animation	Palette	Effect Feel
261	Oak Tree	~8×9	Canopy sway +1px	3-tier green	Wind sway
262	Pine Tree	~6×10	Branch sway +1px	Dark green	Wind sway
263	Cherry Blossom	~8×9	Canopy sway +1px	Pink + brown	Petal drift
264	Bush	~8×5	Sway + opacity 0.85	Green	Rustle
265	Red Flower	~4×8	Sway + opacity 0.85	Red + green	Wind sway
266	Blue Flower	~4×8	Sway + opacity 0.85	Blue + green	Wind sway
267	Red Mushroom	~6×6	Sway + opacity 0.85	Red + white	Rustle
268	Glow Mushroom	~6×6	Sway + opacity 0.85	Cyan glow	Bioluminesce
269	Tall Grass	~6×6	Sway + opacity 0.85	Light green	Wave
270	Mossy Rock	~8×5	Opacity 0.85 only	Gray + green	Shimmer
271	Cave Entrance	~8×8	Opacity 0.85 only	Dark gray	Flicker
272	Waterfall	~6×9	Pixel flow + opacity	Blue + gray	Flowing water
273	Crystal Cluster	~6×7	Opacity 0.85 only	Purple glow	Shimmer
274	Lava Pool	~8×4	Opacity 0.85 only	Red/orange	Bubble
275	Treasure Chest	~8×6	Opacity 0.85 only	Gold/amber	Gleam

What's Next?

That covers all 15 environment sprites — trees, plants, mushrooms, and terrain features. In the next posts, we build the sky above (sun, moon, clouds, rain, snow, lightning, rainbows, stars, wind, aurora) and the ground below (terrain tiles and battle items).

Explore all 310 animations live at CSSKit or star the repo on GitHub.

Originally published at abduarrahman.com

Explore all 310 animations:

Live Demo: CSSKit
Source Code: GitHub

Follow the project:

Instagram: @abduarrahman
YouTube: @abduarrahmanscode
TikTok: @anduarrahmans

Support: Ko-fi

CSS Pixel Art Monsters Part 2 & Dragons — 20 Creatures with Code

Muhammad Abdu ar Rahman — Sat, 16 May 2026 11:15:13 +0000

Try them live — All 20 creatures are available on CSSKit where you can customize colors and speed. Source code on GitHub. See also Battle Monsters Part 1, Baby Monsters.

This post covers the final evolution: 10 more battle monsters and 10 elemental dragons — the largest, most detailed pixel art sprites in CSSKit. Dragons use ~14×12 pixel grids (vs ~10×10 for monsters) with translateY(-4px) fly animations and elemental glow auras.

Part A: Battle Monsters (#241-250)

241. Shadow Cat

Sleek dark feline with glowing pink eyes — stealthy void prowler.

See it live on CSSKit — monster shadow cat animation

How It Works

At 50%, tail pixels at row 7 shift from (1,7) (4,7) to (0,7) (5,7) — the tail sways outward. A single pink pixel (#f472b6) at the eye position creates a menacing glow against the dark body (#374151, #1f2937). The most compact monster sprite at ~6×9 pixels.

<div class="MonsterShadowCat"></div>

242. Thunder Bird

Majestic sky lord with sparking yellow wings.

See it live on CSSKit — monster thunder bird animation

How It Works

At 50%, wing-tip pixels shift — row 5 loses pixels at x=1 and x=8, row 6 shifts from x=2-5 to x=3-6. This creates a wing-fold motion during the translateY(-2px) bob. Yellow/gold palette (#eab308, #facc15, #a16207) gives an electric feel.

<div class="MonsterThunderBird"></div>

243–250. More Battle Monsters

243. Ice Wyrm — Frozen serpentine beast. At 50%, tail tip at row 9 shifts from (5,9) to (6,9). Cyan palette: #a5f3fc (head), #67e8f9 (body), #22d3ee (tail). ~8×10 sprite — tallest of the monsters.

244. Fire Salamander — Amphibian wreathed in flame. At 50%, foot pixel at row 8 shifts position. Three-tone fire palette: #fbbf24 (head/flame), #f97316 (body), #ef4444 (base).

245. Water Kraken — Deep sea terror with writhing tentacles. The most dramatic pixel changes: at 50%, tentacle pixels at rows 6-7 redistribute significantly — tentacles spread outward then retract. Blue palette: #0ea5e9, #0284c7, #0369a1.

246. Earth Golem — Immovable stone guardian. Pure translateY(-2px) bob with no pixel changes between frames. Brown palette: #a16207, #92400e, #78350f. ~10×9 sprite.

247. Psychic Brain — Floating psionic horror. Pure bob animation. Fuchsia palette: #f0abfc, #d946ef, #a21caf. ~10×8 sprite.

248. Venom Plant — Carnivorous flora with dripping toxins. Pure bob animation. Red/green palette: #ef4444 (venom), #22c55e (leaves), #16a34a (stem). ~10×9 sprite.

249. Sand Worm — Giant desert worm. Tallest sprite at ~10×10. Amber palette: #fbbf24, #d4a017, #a16207. Pure bob animation.

250. Storm Eagle — Tempest raptor riding thunderheads. Blue palette: #60a5fa, #3b82f6, #1d4ed8. Pure bob animation. ~10×9 sprite.

Part B: Elemental Dragons (#251-260)

Dragons are the largest pixel art in CSSKit — ~14×12 pixel grids with 4-color palettes, elemental glow auras, and translateY(-4px) fly animations. All 10 dragons share the same silhouette — they're palette swaps.

251. Fire Dragon

Mighty fire dragon with blazing wings — the legendary beast of flame.

See it live on CSSKit — dragon fire animation

How It Works

The dragon uses a ~14×12 pixel grid with 4 color tiers (head → wings → body → tail). At the 50% keyframe, two things happen: (1) eye pixels at (0,6) and (1,6) disappear — the dragon blinks, and (2) translateY(-4px) lifts the entire dragon upward — a fly/hover bob. The drop-shadow(0 0 6px #ef4444) creates a fiery aura.

.DragonFire {
  --dfr-speed: 1s;
  --dfr-scale: 2;
  --dfr-glow: #ef4444;
  width: 1px;
  height: 1px;
  transform: scale(var(--dfr-scale));
  filter: drop-shadow(0 0 6px var(--dfr-glow));
  animation: dfr-fly var(--dfr-speed) ease-in-out infinite;
}

@keyframes dfr-fly {
  0%, 100% {
    box-shadow:
      /* head (yellow) */ 5px 0px #fef08a, 6px 0px #fef08a, /* ... */
      /* wings (orange) */ 2px 4px #f97316, 3px 4px #f97316, /* ... */
      /* body (red) */ 0px 6px #ef4444, 1px 6px #ef4444, /* ... */
      /* tail (dark red) */ 5px 10px #dc2626, /* ... */;
  }
  50% {
    /* Same pixels minus eye at (1,6) — dragon blinks */
    box-shadow: /* ... (0,6) and (1,6) removed ... */;
    transform: scale(var(--dfr-scale)) translateY(-4px);
  }
}

<div class="DragonFire"></div>

Customize: --dfr-speed (0.3-4s), --dfr-scale (1-3.5x), --dfr-glow (aura color).

252. Ice Dragon

Frost-breathing arctic dragon with crystalline wings.

See it live on CSSKit — dragon ice animation

Same silhouette as Fire Dragon — only colors change. Ice palette: #e0f2fe (head), #7dd3fc (wings), #38bdf8 (body), #0284c7 (tail). Cyan glow aura.

<div class="DragonIce"></div>

253–260. More Elemental Dragons

253. Thunder Dragon — Lightning-wreathed storm beast. Palette: #fef9c3 (pale yellow), #facc15 (gold), #eab308 (amber), #ca8a04 (dark gold). Golden glow.

254. Shadow Dragon — Void-touched nether beast. Palette: #c084fc (light purple), #a855f7 (violet), #7c3aed (deep purple), #6d28d9 (dark violet). Violet glow.

255. Crystal Dragon — Prismatic gemstone dragon. Palette: #f0abfc (light pink), #e879f9 (fuchsia), #d946ef (purple-pink), #a21caf (dark magenta). Fuchsia glow.

256. Nature Dragon — Ancient forest guardian. Palette: #86efac (mint), #4ade80 (green), #22c55e (main), #15803d (dark). Green glow.

257. Sea Dragon — Oceanic leviathan. Palette: #a5f3fc (ice blue), #67e8f9 (cyan), #06b6d4 (main), #0e7490 (deep). Cyan glow.

258. Wind Dragon — Sky phantom. Palette: #e2e8f0 (silver), #cbd5e1 (light slate), #94a3b8 (main), #64748b (dark). Slate glow.

259. Ancient Dragon — Elder wyrm of untold age. Slightly larger sprite (~16×12). Palette: #fde68a (amber), #d4a017 (gold), #a16207 (amber), #854d0e (dark). 3-pixel wing blink at 50%.

260. Baby Emperor Dragon — Destined king of all dragons. Uses 4 color shades instead of 3, with an extra #fbbf24 amber crown layer. Palette: #fef9c3, #fbbf24, #f59e0b, #d97706, #b45309. Golden royal glow.

Dragon Color Reference

#	Dragon	Head	Wings	Body	Tail	Glow
251	Fire	`#fef08a`	`#f97316`	`#ef4444`	`#dc2626`	`#ef4444`
252	Ice	`#e0f2fe`	`#7dd3fc`	`#38bdf8`	`#0284c7`	`#67e8f9`
253	Thunder	`#fef9c3`	`#facc15`	`#eab308`	`#ca8a04`	`#facc15`
254	Shadow	`#c084fc`	`#a855f7`	`#7c3aed`	`#6d28d9`	`#a855f7`
255	Crystal	`#f0abfc`	`#e879f9`	`#d946ef`	`#a21caf`	`#d946ef`
256	Nature	`#86efac`	`#4ade80`	`#22c55e`	`#15803d`	`#22c55e`
257	Sea	`#a5f3fc`	`#67e8f9`	`#06b6d4`	`#0e7490`	`#06b6d4`
258	Wind	`#e2e8f0`	`#cbd5e1`	`#94a3b8`	`#64748b`	`#94a3b8`
259	Ancient	`#fde68a`	`#d4a017`	`#a16207`	`#854d0e`	`#a16207`
260	Emperor	`#fef9c3`	`#fbbf24`	`#f59e0b`	`#b45309`	`#fbbf24`

Creating a custom dragon: Copy the Fire Dragon CSS, replace the 4 color values with your element palette, change the CSS variable prefix (--dfr- → --dxx-), and update the glow color. The pixel art stays identical.

What's Next?

That covers all 10 battle monsters and 10 elemental dragons. In the next posts, we build the world around them — pixel art environments (trees, mushrooms, waterfalls, caves) and weather effects (sun, rain, snow, lightning).

Explore all 310 animations live at CSSKit or star the repo on GitHub.

Originally published at abduarrahman.com

Explore all 310 animations:

Live Demo: CSSKit
Source Code: GitHub

Follow the project:

Instagram: @abduarrahman
YouTube: @abduarrahmanscode
TikTok: @anduarrahmans

Support: Ko-fi

CSS Pixel Art Battle Monsters Part 1 — 10 Creatures with Code

Muhammad Abdu ar Rahman — Sat, 16 May 2026 11:15:11 +0000

Try them live — All 10 battle monsters are available on CSSKit where you can customize colors and speed. Source code on GitHub. See also Baby Monsters, Elemental Eggs.

The baby monsters have evolved! Battle monsters are larger, more detailed pixel art sprites (~10×10 pixel grids) with idle animations — prowling, creeping, slithering, and floating. All built with the same box-shadow technique on a single <div>.

Battle Monster Technique

These monsters are bigger than the babies — larger pixel grids mean more detail. The animation pattern is consistent:

2-frame idle (0%,100% + 50%) with ease-in-out infinite
translateY(-2px) at 50% for a breathing/prowling bob
Subtle pixel shifts between frames (leg positions, tentacle movement, tail sway)
Scale factor: 2.5x default (range 1.5-4x)
Speed: 1s default (range 0.3-4s)

231. Battle Wolf

Fierce wolf with prowling animation — loyal beast with sharp fangs.

See it live on CSSKit — monster wolf animation

How It Works

At the 50% keyframe, translateY(-2px) lifts the wolf into a prowl. The feet pixels at row 8 shift: 2px 8px and 8px 8px move to 3px 8px and 7px 8px — the paws step inward, simulating a creeping gait. Three-tone gray palette gives depth: #e2e8f0 (head), #94a3b8 (body), #64748b (legs).

.MonsterWolf {
  --mwo-speed: 1s;
  --mwo-scale: 2.5;
  width: 1px;
  height: 1px;
  transform: scale(var(--mwo-scale));
  animation: mwo-idle var(--mwo-speed) ease-in-out infinite;
}

@keyframes mwo-idle {
  0%, 100% {
    box-shadow:
      /* head */ 4px 0px #e2e8f0, 5px 0px #e2e8f0,
      /* body */ 2px 3px #94a3b8, 3px 3px #94a3b8, /* ... */
      /* legs */ 2px 8px #64748b, 8px 8px #64748b;
  }
  50% {
    box-shadow: /* same but feet at 3px,7px instead of 2px,8px */;
    transform: scale(var(--mwo-scale)) translateY(-2px);
  }
}

<div class="MonsterWolf"></div>

232. Giant Spider

Venomous spider with creeping legs — eight-legged terror with red eyes.

See it live on CSSKit — monster spider animation

How It Works

The widest sprite in the set (~12px wide). At 50%, leg pixels at rows 6-8 shift positions — legs spread outward then contract, creating a creeping motion. A single red pixel (#ef4444) at position (3,3) creates a menacing eye. Dark navy palette (#1e293b, #374151) keeps the spider menacing.

<div class="MonsterSpider"></div>

233. Death Scorpion

Armored scorpion with tail strike — desert predator with amber stinger.

See it live on CSSKit — monster scorpion animation

How It Works

Shares the ~12px width with the spider. At 50%, bottom-row pincer pixels shift subtly, and translateY(-2px) creates a tail-raising bob. Amber stinger tips at positions (0,0) and (11,0) use #fbbf24 (bright yellow) against the dark body #a16207 and #92400e — the contrasting color makes the stinger visually pop.

<div class="MonsterScorpion"></div>

234. Mystic Owl

Wise owl with hovering idle — nocturnal seer with amber body.

See it live on CSSKit — monster owl animation

How It Works

The most compact sprite (~8×8 grid). The translateY(-2px) bob combined with the symmetric silhouette creates an owl hovering silently. Brown tones (#92400e, #78350f) throughout. The bottom feet pixels shift slightly between frames for a perching adjustment.

<div class="MonsterOwl"></div>

235. Venom Serpent

Slithering snake with coiling tail — the tallest sprite at ~10px height.

See it live on CSSKit — monster snake animation

How It Works

At 50%, the tail pixels at row 9 shift from (4,9) (5,9) to (3,9) (4,9) — the tail sways left by one pixel. Combined with translateY(-2px), this creates a slithering motion. Three green tones (#22c55e head, #16a34a body, #15803d tail) create depth along the snake's length.

<div class="MonsterSnake"></div>

236–240. More Battle Monsters

236. Cave Bear — Massive bear with standing/prowling idle. At 50%, feet pixels at row 7 shift between two positions (x=0,8 vs x=1,9), simulating a weight-shift step. Earthy brown palette: #92400e (body), #78350f (lower), #6b4f2a (claws). ~10×10 grid.

237. Deep Jellyfish — Bioluminescent jellyfish with the most dramatic animation. At 50%, tentacle pixels at rows 6-8 change significantly — tentacles retract inward (pixels disappear at some positions, appear at others). Purple palette: #c084fc (dome), #a855f7 (tentacles), #7c3aed (tips). This is the most visually active idle in the set.

238. Fungal Shroom — Poisonous mushroom with gentle hover. Both keyframes have identical pixel data — the only animation is translateY(-2px). Pure transform animation. Red cap (#dc2626, #ef4444) with white stem dots (#f1f5f9).

239. Ghost Flame — Undead fire spirit with flickering wisp. At 50%, base pixels at row 7 shift left by 1px — the flame leans as if blown by wind. Cyan palette: #67e8f9 (top), #22d3ee (body), #06b6d4 (core), #0891b2 (base).

@keyframes mgf-idle {
  0%, 100% {
    box-shadow: /* base pixels at row 7: x=1, x=8 */;
  }
  50% {
    box-shadow: /* base pixels shift to x=0, x=9 (flicker) */;
    transform: scale(var(--mgf-scale)) translateY(-2px);
  }
}

240. Crystal Golem — Living crystal construct. Both keyframes have identical pixels — pure translateY(-2px) bob animation. Four-tier cyan palette gives crystalline depth: #a5f3fc (crown), #67e8f9 (upper body), #22d3ee (lower body), #06b6d4 (feet).

Battle Monster Comparison

#	Monster	Sprite Size	Palette	Pixel Animation	Idle Feel
231	Battle Wolf	8×9	Slate gray	Feet step	Prowling
232	Giant Spider	12×9	Dark navy + red eye	Legs spread/contract	Creeping
233	Death Scorpion	12×8	Amber/brown	Pincer shift	Tail raise
234	Mystic Owl	8×8	Brown	Feet shift	Hovering
235	Venom Serpent	6×10	Green	Tail sway	Slithering
236	Cave Bear	10×10	Brown/amber	Weight shift	Prowling
237	Deep Jellyfish	10×9	Purple/violet	Tentacles retract	Pulsing
238	Fungal Shroom	10×9	Red/white	None (transform only)	Hovering
239	Ghost Flame	10×9	Cyan	Base flicker	Flickering
240	Crystal Golem	10×10	Cyan/light blue	None (transform only)	Bobbing

What's Next?

That covers the first 10 battle monsters from CSSKit. In the next post, more monsters emerge — including shadow cats, thunder birds, ice wyrms, fire salamanders, and water krakens — followed by 10 elemental dragons (fire, ice, thunder, shadow, crystal, nature, water, wind, ancient, baby emperor).

Explore all 310 animations live at CSSKit or star the repo on GitHub.

Originally published at abduarrahman.com

Explore all 310 animations:

Live Demo: CSSKit
Source Code: GitHub

Follow the project:

Instagram: @abduarrahman
YouTube: @abduarrahmanscode
TikTok: @anduarrahmans

Support: Ko-fi

CSS Pixel Art Baby Monsters — 10 Idle Animations with Code

Muhammad Abdu ar Rahman — Sat, 16 May 2026 11:15:08 +0000

Try them live — All 10 baby monsters are available on CSSKit where you can customize colors and speed. Source code on GitHub. See also Elemental Eggs, Pixel Art Box-Shadow Basics.

The eggs have hatched! Each of the 10 elemental eggs from the previous post becomes a baby monster with a unique idle animation — floating, hopping, swaying, flapping, shivering, and pulsing. All built with the same box-shadow pixel art technique.

The Idle Animation Pattern

Each baby monster has a 2-frame idle cycle (0%/100% + 50%) using ease-in-out infinite. The personality comes from:

Idle Type	Transform	Effect
Float	`translateY(-2px)`	Gentle hover
Hop	`translateY(-4px)`	Energetic bounce
Bob	`translateY(-3px)`	Aquatic drift
Sway	`rotate(3deg)`	Plant-like tilt
Flap	`translateY(-2px)` + wing pixels change	Wing spread
Shiver	`translateX(±1px)`	Cold tremor
Dig	`translateY(+2px)`	Downward burrow
Pulse	`scale(1.05)` + glow expansion	Energy burst
Flutter	`translateY(-3px)` + pixel removal	Wing fold

221. Fire Lizard Baby

Tiny fire lizard with flickering tail flame — a gentle floating idle.

See it live on CSSKit — baby fire lizard animation

How It Works

At the 50% keyframe, two things happen: (1) the entire sprite lifts translateY(-2px) creating a gentle float, and (2) foot pixels shift — 1px 7px #b91c1c changes to 0px 7px #b91c1c (left foot shifts left by 1px), simulating a weight shift. The tail flame pixels at the top stay constant. Orange drop-shadow(0 0 4px) provides ambient ember glow.

.babyFireLizard {
  --bfl-speed: 0.8s;
  --bfl-scale: 3;
  --bfl-glow: #f97316;
  width: 1px;
  height: 1px;
  transform: scale(var(--bfl-scale));
  filter: drop-shadow(0 0 4px var(--bfl-glow));
  animation: bfl-idle var(--bfl-speed) ease-in-out infinite;
}

Colors: #f97316 (orange flame), #ef4444 (red body), #dc2626 (dark red lower), #164e63 (teal eyes).

<div class="babyFireLizard"></div>

222. Water Turtle Baby

Tiny turtle with bobbing animation — aquatic drift with retracting limbs.

See it live on CSSKit — baby water turtle animation

How It Works

At 50%, translateY(-3px) bobs the turtle upward. Meanwhile, 2 of the 4 foot pixels at row 8 disappear — simulating limbs pulling into the shell during the bob. The slow 1.2s timing gives it a calm, aquatic feel. Blue shell uses three shades for depth.

.babyWaterTurtle {
  --bwt-speed: 1.2s;
  --bwt-scale: 3;
  --bwt-glow: #3b82f6;
  animation: bwt-bob var(--bwt-speed) ease-in-out infinite;
}

Colors: #3b82f6 (blue head/limbs), #1d4ed8 (dark shell), #60a5fa (light feet), #22d3ee (cyan eye highlight).

<div class="babyWaterTurtle"></div>

223. Grass Bulb Baby

Tiny plant with swaying leaves — the only one using rotation instead of translation.

See it live on CSSKit — baby grass bulb animation

How It Works

At 50%, rotate(3deg) tilts the entire plant clockwise — like a gentle breeze. Leaf-tip pixels at the top shift from #22c55e to #4ade80 (lighter green), creating a shimmering effect. The 1.5s timing makes it the slowest baby, giving a calm, plant-like sway.

.babyGrassBulb {
  --bgb-speed: 1.5s;
  --bgb-scale: 3;
  --bgb-glow: #22c55e;
  animation: bgb-sway var(--bgb-speed) ease-in-out infinite;
}

Colors: #22c55e (green body), #4ade80 (light leaf tips), #16a34a (dark green lower), #15803d (trunk base).

<div class="babyGrassBulb"></div>

224. Electric Mouse Baby

Tiny mouse with hop and sparky cheeks — the most energetic idle.

See it live on CSSKit — baby electric mouse animation

How It Works

At 50%, three things happen simultaneously: (1) translateY(-4px) — the highest jump of any baby, (2) middle foot pixels at row 9 disappear (feet leave ground), and (3) drop-shadow expands from 0 0 4px to 0 0 10px — a lightning glow pulse. The fast 0.6s timing makes it feel hyperactive. Cyan cheeks (#22d3ee) and pink mouth (#f472b6) add personality.

.babyElectricMouse {
  --bem-speed: 0.6s;
  --bem-scale: 3;
  --bem-glow: #facc15;
  animation: bem-hop var(--bem-speed) ease-in-out infinite;
}

@keyframes bem-hop {
  0%, 100% {
    box-shadow: /* full sprite with 4 feet pixels */;
  }
  50% {
    box-shadow: /* sprite with only 2 feet pixels */;
    transform: scale(var(--bem-scale)) translateY(-4px);
    filter: drop-shadow(0 0 10px var(--bem-glow));
  }
}

<div class="babyElectricMouse"></div>

225. Dark Bat Baby

Tiny bat with flapping wings — fastest animation at 0.5s.

See it live on CSSKit — baby dark bat animation

How It Works

At 50%, wing pixels spread outward — pixels at rows 5-6 shift from 1px/5px-6px to 0px/6px-7px positions, extending the wingspan by 1 pixel on each side. The lower body pixels at row 7 disappear during the flap. translateY(-2px) adds a slight lift. The 0.5s speed creates rapid wing beats.

<div class="babyDarkBat"></div>

Colors: #7c3aed (purple body/wings), #6d28d9 (dark wing edges), #fbbf24 (yellow eyes).

226–230. More Baby Monsters

226. Ice Seal Baby — Shivering animation with 4 keyframe stops (0%, 25%, 50%, 75%). At 25% it shifts +1px right, at 75% it shifts -1px left, creating a horizontal tremble. At 50%, the entire body palette swaps from icy blues to pure white #ffffff — a frost-flash shimmer effect. Unique among babies for using horizontal movement instead of vertical.

@keyframes bis-shiver {
  0%, 100% { /* normal icy blue pixels */ }
  25% { transform: scale(var(--bis-scale)) translateX(1px); }
  50% { box-shadow: /* white flash pixels */; }
  75% { transform: scale(var(--bis-scale)) translateX(-1px); }
}

227. Psychic Eye Baby — Pulsing glow + scale throb. At 50%, body color shifts from deep fuchsia #d946ef to lighter #e879f9, glow expands from 6px to 14px drop-shadow, and scale bumps to 1.05×. The eye area (#f0abfc) stays constant while the body "pulses" with psychic energy. Slowest at 1.5s.

228. Earth Mole Baby — Digging bob with downward motion. At 50%, the sprite moves translateY(+2px) — the only baby that moves downward instead of up, simulating burrowing. Upper body shifts from dark brown #a16207 to golden #ca8a04 (dirt churning effect). Yellow eyes (#fef08a) stay bright.

229. Wind Bird Baby — Wing flutter with pixel removal. At 50%, light-gray wing-tip pixels drop from 6 to 4 visible (2 pixels disappear), simulating wings folding inward. translateY(-3px) lifts the bird. Fastest animation at 0.4s. No color swap — purely structural pixel removal.

230. Light Fairy Baby — The most complex idle, combining 4 effects: (1) head pixels flash from cream #fef9c3 to white #ffffff, (2) glow expands from 6px to 14px, (3) translateY(-3px) float, and (4) scale(1.05) throb — all at 50%. Creates a divine twinkle effect.

Baby Monster Idle Comparison

#	Monster	Idle Type	Move	Color Shift	Glow Expand	Speed
221	Fire Lizard	Float	-2px up	No	No	0.8s
222	Water Turtle	Bob	-3px up	No	No	1.2s
223	Grass Bulb	Sway	rotate 3deg	Green→lighter	No	1.5s
224	Electric Mouse	Hop	-4px up	No	4px→10px	0.6s
225	Dark Bat	Flap	-2px up	Wing spread	No	0.5s
226	Ice Seal	Shiver	±1px horizontal	Blue→white	No	1.0s
227	Psychic Eye	Pulse	No (scale 1.05×)	Fuchsia→lighter	6px→14px	1.5s
228	Earth Mole	Dig	+2px down	Brown→golden	No	0.8s
229	Wind Bird	Flutter	-3px up	Wing pixels vanish	No	0.4s
230	Light Fairy	Twinkle	-3px up + 1.05×	Cream→white	6px→14px	1.0s

What's Next?

That covers all 10 baby monsters from CSSKit. In the next posts, these babies grow into battle monsters and eventually elemental dragons — larger, more detailed pixel art sprites with attack animations.

Explore all 310 animations live at CSSKit or star the repo on GitHub.

Originally published at abduarrahman.com

Explore all 310 animations:

Live Demo: CSSKit
Source Code: GitHub

Follow the project:

Instagram: @abduarrahman
YouTube: @abduarrahmanscode
TikTok: @anduarrahmans

Support: Ko-fi

CSS Pixel Art Eggs — 10 Elemental Hatching Effects with Code

Muhammad Abdu ar Rahman — Sat, 16 May 2026 11:15:06 +0000

Try them live — All 10 elemental eggs are available on CSSKit where you can customize colors and speed. Source code on GitHub. See also Pixel Art Box-Shadow Basics, Card & Divider Animations.

Monster-taming game eggs — 10 elemental pixel art eggs, each with a unique color palette and a shared hatching animation pattern. The egg wobbles, flashes white, and pulses with elemental glow. All built with pure CSS box-shadow pixel art.

The Shared Technique

All 10 eggs use the exact same animation structure — only the color palette changes per element. Here's the pattern:

0%-70%-100%  →  Rest state (normal egg pixels)
10%          →  Wobble right (rotate 5deg)
20%          →  Wobble left (rotate -5deg)
30%          →  Wobble right (rotate 3deg)
40%          →  Wobble left (rotate -3deg)
50%          →  PULSE: white flash + glow intensifies + scale 1.05x
60%          →  Back to rest

Each egg has 3 color tiers: highlight (top rows), body (middle rows), shadow (bottom rows), plus #ffffff white for the flash effect.

211. Fire Egg

Blazing fire egg with pulsing heat — orange/red glow.

See it live on CSSKit — egg fire animation

How It Works

The egg is drawn on a 1px element using box-shadow — each Xpx Ypx #color places one pixel. The animation has three phases:

Wobble (10%-40%): rotate(5deg) → rotate(-5deg) → rotate(3deg) → rotate(-3deg) — simulates a hatching wiggle
Pulse (50%): Top-row highlight pixels change to #ffffff (white flash), drop-shadow expands from 0 0 4px to 0 0 12px (intensified glow), and scale(1.05) makes the egg swell
Rest (0%, 70%, 100%): Normal pixel art, gentle 0 0 4px ambient glow

.EggFire {
  --fir-speed: 1.5s;
  --fir-scale: 3;
  --fir-glow: #f97316;
  width: 1px;
  height: 1px;
  position: relative;
  left: -28px;
  top: -20px;
  transform: scale(var(--fir-scale));
  filter: drop-shadow(0 0 4px var(--fir-glow));
  animation: fir-hatch var(--fir-speed) ease-in-out infinite;
}

Colors: #fbbf24 (amber highlight), #f97316 (orange body), #ef4444 (red shadow).

<div class="EggFire"></div>

212. Water Egg

Cool water egg with rippling surface — blue glow.

See it live on CSSKit — egg water animation

How It Works

Identical structure to the Fire Egg — same keyframe stops, same wobble/pulse pattern. Only the color palette changes: cyan highlights, sky blue body, deep blue shadow.

.EggWater {
  --wat-speed: 1.5s;
  --wat-scale: 3;
  --wat-glow: #0ea5e9;
  width: 1px;
  height: 1px;
  transform: scale(var(--wat-scale));
  filter: drop-shadow(0 0 4px var(--wat-glow));
  animation: wat-hatch var(--wat-speed) ease-in-out infinite;
}

Colors: #67e8f9 (cyan highlight), #0ea5e9 (sky blue body), #3b82f6 (blue shadow).

<div class="EggWater"></div>

213. Grass Egg

Natural grass egg with leaf patterns — green glow.

See it live on CSSKit — egg grass animation

How It Works

Green palette applied to the same template. At the 50% keyframe, select top-row pixels flash white while the drop-shadow glow intensifies from 4px to 12px spread.

.EggGrass {
  --gra-speed: 1.5s;
  --gra-scale: 3;
  --gra-glow: #22c55e;
  /* ...same structure... */
}

Colors: #86efac (light green), #22c55e (green), #16a34a (dark green).

<div class="EggGrass"></div>

214. Electric Egg

Charged electric egg with sparks — yellow/gold glow.

See it live on CSSKit — egg electric animation

.EggElectric {
  --ele-glow: #eab308;
  /* Colors: #fef08a highlight, #eab308 body, #facc15 shadow */
}

<div class="EggElectric"></div>

215–220. More Elemental Eggs

215. Dark Egg — Shadowy purple egg with mist. Colors: #a78bfa (light purple), #7c3aed (purple), #6d28d9 (dark purple). Glow: #7c3aed.

216. Ice Egg — Frozen crystalline egg. Colors: #a5f3fc (ice blue), #06b6d4 (cyan), #0891b2 (dark cyan). Glow: #06b6d4.

217. Psychic Egg — Mysterious pink aura egg. Colors: #f9a8d4 (light pink), #ec4899 (hot pink), #db2777 (dark pink). Glow: #ec4899.

218. Earth Egg — Rocky brown/gold egg. Colors: #fbbf24 (golden yellow), #a16207 (dark amber), #92400e (deep brown). Glow: #a16207.

219. Wind Egg — Swift silver-gray egg. Colors: #cbd5e1 (silver), #94a3b8 (slate), #64748b (dark slate). Glow: #94a3b8.

220. Light Egg — Radiant holy glow egg. Colors: #fef9c3 (pale cream), #fbbf24 (bright gold), #f59e0b (deep gold). Glow: #fbbf24.

Element Color Reference

Egg	Highlight	Body	Shadow	Glow	Element Feel
Fire	`#fbbf24`	`#f97316`	`#ef4444`	`#f97316`	Hot orange/red
Water	`#67e8f9`	`#0ea5e9`	`#3b82f6`	`#0ea5e9`	Cool blue/cyan
Grass	`#86efac`	`#22c55e`	`#16a34a`	`#22c55e`	Natural green
Electric	`#fef08a`	`#eab308`	`#facc15`	`#eab308`	Bright yellow
Dark	`#a78bfa`	`#7c3aed`	`#6d28d9`	`#7c3aed`	Shadow purple
Ice	`#a5f3fc`	`#06b6d4`	`#0891b2`	`#06b6d4`	Frozen cyan
Psychic	`#f9a8d4`	`#ec4899`	`#db2777`	`#ec4899`	Mystical pink
Earth	`#fbbf24`	`#a16207`	`#92400e`	`#a16207`	Earthy brown
Wind	`#cbd5e1`	`#94a3b8`	`#64748b`	`#94a3b8`	Swift silver
Light	`#fef9c3`	`#fbbf24`	`#f59e0b`	`#fbbf24`	Holy gold

Customization params per egg: --{prefix}-speed (animation duration), --{prefix}-scale (pixel size, 2-5), --{prefix}-glow (glow color).

Creating Your Own Elemental Egg

Since all eggs share the same animation template, you can create a new element in 3 steps:

Choose 3 colors: light (highlight), medium (body), dark (shadow)
Replace colors in the box-shadow values — top 2 rows get highlight, middle 4 rows get body, bottom 2 rows get shadow
Set the glow color in the CSS variable and drop-shadow filter

The wobble + pulse + flash animation stays the same. It's a color-swap template.

What's Next?

That covers all 10 elemental eggs from CSSKit. In the next post, the eggs hatch into baby monsters — 10 cute pixel art creatures with idle animations (fire lizard, water turtle, grass bulb, electric mouse, dark bat, ice seal, psychic eye, earth mole, wind bird, light fairy).

Explore all 310 animations live at CSSKit or star the repo on GitHub.

Originally published at abduarrahman.com

Explore all 310 animations:

Live Demo: CSSKit
Source Code: GitHub

Follow the project:

Instagram: @abduarrahman
YouTube: @abduarrahmanscode
TikTok: @anduarrahmans

Support: Ko-fi

CSS Pixel Art — Box-Shadow Technique, 22 Effects with Code

Muhammad Abdu ar Rahman — Sat, 16 May 2026 11:15:04 +0000

Try them live — All 22 pixel art animations are available on CSSKit where you can customize colors and speed. Source code on GitHub. See also Card & Divider Animations.

This post introduces the CSS box-shadow pixel art technique — drawing game sprites using nothing but CSS box-shadow. No images, no JavaScript, no canvas. Each sprite is a single <div> element, and every "pixel" is a box-shadow offset. Animation is achieved by swapping box-shadow values between keyframes.

The Technique: How Box-Shadow Pixel Art Works

Before diving into the sprites, here's the core concept:

.pixel-sprite {
  width: 1px;
  height: 1px;        /* A single pixel element */
  transform: scale(3); /* Scale up so 1px becomes 3px */
  box-shadow:
    0px 0px #ff0000,   /* Pixel at (0,0) - red */
    1px 0px #ff0000,   /* Pixel at (1,0) - red */
    0px 1px #ff0000,   /* Pixel at (0,1) - red */
    1px 1px #ff0000;   /* Pixel at (1,1) - red */
}

Each Xpx Ypx #color in box-shadow paints one pixel at that coordinate. The transform: scale(3) makes each 1px pixel appear as a 3×3 block on screen. Animation works by defining different box-shadow values in @keyframes — CSS transitions between them.

Two timing strategies:

steps(1) — Hard frame cuts (authentic retro feel)
ease-in-out — Smooth interpolation (organic motion)

189. Pixel Bat

Detailed bat with 8-frame wing flap — the most complex sprite in the collection.

See it live on CSSKit — pixel bat animation

How It Works

The bat uses an 8-frame animation cycle at 0.4s steps(1) infinite. Each keyframe (0%, 14%, 28%, 42%, 57%, 71%, 85%, 100%) contains a complete set of box-shadow values representing a different wing position. The wings sweep through a full flap cycle. Colors: #54556b (body/wing), #202020 (dark details), #ff6b6b (red eyes). The 1px element is scaled 3× with large offsets (left: -96px; top: -96px) for this large sprite.

.pixel-bat-body {
  width: 1px;
  height: 1px;
  transform: scale(3);
  animation: pb-flap 0.4s steps(1) infinite;
}

<div class="pixel-bat-body"></div>

190. Pixel Heart

Heartbeat pulse — the simplest animation technique (scale only, same pixels).

See it live on CSSKit — pixel heart animation

How It Works

This is the easiest pixel art animation to understand. The box-shadow pixel data stays identical across all keyframes — only the scale value changes. At 0% it's scale(4), at 15% it pulses to scale(4.3), back to scale(4) at 30%, a smaller pulse scale(4.15) at 45%, then settles at 60%. This creates a realistic double-beat heartbeat pattern.

.pixel-heart {
  width: 1px;
  height: 1px;
  left: -24px;
  top: -24px;
  transform: scale(4);
  animation: ph-beat 1s ease-in-out infinite;
}

@keyframes ph-beat {
  0%, 100% {
    box-shadow:
      2px 0px #ff6b81, 3px 0px #ff6b81,
      6px 0px #ff6b81, 7px 0px #ff6b81,
      1px 1px #ff4757, 2px 1px #ff4757,
      3px 1px #e74c3c, 4px 1px #e74c3c,
      /* ... all heart pixels ... */
      4px 8px #c0392b, 5px 8px #c0392b;
  }
  15% { transform: scale(4.3); /* Same pixels, bigger */ }
  30% { transform: scale(4); }
  45% { transform: scale(4.15); }
  60% { transform: scale(4); }
}

<div class="pixel-heart"></div>

Colors: #ff6b81 (highlight pink), #ff4757 (bright red), #e74c3c (main body), #c0392b (dark tip).

191. Pixel Star

Golden twinkling star with 2-frame color swap.

See it live on CSSKit — pixel star animation

How It Works

Uses steps(1) timing for a hard-cut between two frames. Frame 1 has normal gold colors (#f9e547, #f1c40f, #d4a017), while frame 2 swaps certain pixels to white #ffffff — creating a sparkle highlight that blinks on and off.

.pixel-star {
  width: 1px;
  height: 1px;
  transform: scale(4);
  animation: ps-twinkle 0.8s steps(1) infinite;
}

<div class="pixel-star"></div>

192. Pixel Sword

RPG sword with gleaming blade — the metallic shine effect.

See it live on CSSKit — pixel sword animation

How It Works

Two frames with ease-in-out timing. Frame 1: blade pixels are #ecf0f1 (light steel) and #bdc3c7 (medium steel). Frame 2: all blade pixels shift to #ffffff (pure white flash) with scale(3.1) — creating a gleaming shine. The gold crossguard (#f1c40f) and brown grip (#8b4513) stay consistent.

.pixel-sword {
  width: 1px;
  height: 1px;
  left: -20px;
  top: -36px;
  transform: scale(3);
  animation: psword-gleam 1.2s ease-in-out infinite;
}

<div class="pixel-sword"></div>

193. Pixel Coin

Spinning gold coin with 4-frame rotation — simulating 3D spin in 2D.

See it live on CSSKit — pixel coin animation

How It Works

This is a brilliant trick: 4 keyframes (0%, 33%, 66%, 100%) show the coin at different widths. Frame 1 (0%): full circle, 8×8 pixels. Frame 2 (33%): narrower, ~6×8 pixels. Frame 3 (66%): thinnest, ~2×8 pixels (edge-on). Frame 4 (100%): back to full. This shrinking/expanding of the pixel grid creates a convincing 3D rotation illusion using only 2D pixel data.

.pixel-coin {
  width: 1px;
  height: 1px;
  transform: scale(3);
  animation: pcoin-spin 0.9s steps(1) infinite;
}
/* 0% = full face, 33% = angled, 66% = edge-on, 100% = full face */

<div class="pixel-coin"></div>

194. Pixel Skeleton

Walking skeleton with 2-frame leg swap — classic RPG enemy animation.

See it live on CSSKit — pixel skeleton animation

How It Works

Only the bottom rows (legs) change between frames. The upper body (skull, torso, arms) stays identical across both keyframes. This is the classic sprite animation technique — only animate the parts that move. Uses steps(1) for hard frame cuts at 0.6s, creating a brisk walk cycle. Colors: #e2e8f0 (light bone) and #94a3b8 (dark bone outline).

<div class="pixel-skeleton"></div>

195. Pixel Mushroom

Mario-style power-up with squash-and-stretch bounce.

See it live on CSSKit — pixel mushroom animation

How It Works

Combines three techniques simultaneously: (1) translateY(-4px) to bounce up, (2) scale(3) to scale(3.1) for squash-stretch, and (3) pixel-level changes where the cap spots shift by 1px. Uses ease-in-out for organic bounce. Colors: #ef4444 (red cap), #fef3c7 (cream spots), #92400e (brown stem).

<div class="pixel-mushroom"></div>

196–210. More Pixel Art Sprites

196. Pixel Potion — RPG magic potion with 2-frame bubble effect. A single highlight pixel (#c084fc) appears and disappears at (1px, 3px), simulating a bubble rising in purple liquid (#a855f7). Uses steps(1) at 0.8s.

197. Pixel Cherry — Pair of cherries with bounce. Uses ease-in-out with translateY(-3px) and stem pixels shifting up one row. Colors: red cherries (#ef4444), green stems (#22c55e).

198. Pixel Alien — Space Invader alien with arm animation. Two frames swap between arms-down and arms-up positions, exactly like the original arcade game. Green (#22c55e) body, black (#000000) eyes. Uses steps(1) for authentic frame-snapping.

199. Pixel Sword & Shield — RPG shield with metallic gleam. Edge colors alternate between #64748b (dark) and #cbd5e1 (light) with a subtle scale(3.08) pulse. Uses ease-in-out for smooth shimmer.

200. Pixel Diamond — Cyan gemstone with sparkle. White (#ffffff) sparkle pixels appear at different positions across the diamond facets between frames. Uses steps(1) for snappy glitter. Colors: #67e8f9, #06b6d4, #0891b2.

201. Pixel Crown — Golden crown with shimmer. Gold shifts between #fbbf24 and #fde68a, gemstones alternate red (#ef4444) and pink (#ff6b81), with scale(3.1) pulse. Uses ease-in-out.

202. Pixel Ghost — Pac-Man style ghost with floating bob. The bottom row alternates between two zigzag patterns (creating a wavy tentacle effect) while translateY(-6px) creates the float. Colors: #f1f5f9 (body), #1e293b (eyes).

@keyframes pgh-float {
  0%, 100% {
    box-shadow: /* full ghost with zigzag bottom */;
    transform: scale(3) translateY(0);
  }
  50% {
    box-shadow: /* ghost with different bottom row */;
    transform: scale(3) translateY(-6px);
  }
}

203. Pixel Dragon — Complex dragon with 3-frame fire breath. Frame 1: body only. Frames 2-3: progressively larger flame pixels (yellow/orange/red) extend from the mouth. Uses steps(1) for frame-by-frame fire animation. Multiple green shades for the body. Has a drop-shadow filter for red glow.

204. Pixel Spaceship — Spacecraft with thrust flame. Frame 1: ship body. Frame 2: yellow/orange thrust pixels appear below engines with translateY(-2px) upward nudge. Uses steps(1) with golden drop-shadow.

205. Pixel Robot — Mech robot with waving arm. Frame 2 shifts the left arm pixels upward and outward. Cyan (#22d3ee) glowing eyes with drop-shadow filter for glow effect. Uses steps(1).

206. Pixel Cat — Cute cat with tail wag. Frame 2 adds tail pixels extending from the lower-right body with translateY(-1px) bounce. Uses smooth ease-in-out timing. Colors: orange body, green eyes, pink mouth.

207. Pixel Slime — RPG blob with squish bounce. The most transform-heavy sprite: frame 1 is squished (scaleX(1.1) scaleY(0.9)), frame 2 is stretched (scaleX(0.9) scaleY(1.1)) with translateY(-6px) jump. Green body with drop-shadow glow.

208. Pixel Treasure — Chest with opening animation. 3-phase cycle: closed (0-20%) → open with gold coins (40-60%) → closed again (80-100%). The lid pixels disappear, coin pixels appear inside. Uses ease-in-out.

209. Pixel Bomb — Retro bomb with fuse spark. Frame 2 replaces gray fuse pixels with bright yellow/orange spark, intensifies drop-shadow from 3px to 8px spread for a flash. Uses steps(1).

210. Pixel Tree — Nature tree with wind sway. The canopy pixels shift 1px left while the trunk stays static, plus translateX(2px) for a wind sway illusion. Multiple green shades (#22c55e, #16a34a, #15803d). Uses ease-in-out.

Pixel Art Animation Cheat Sheet

Technique	How It Works	Example
Scale pulse	Same pixels, change `scale()`	Heart beat
Color swap	Same positions, different colors	Star twinkle, Sword gleam
Pixel shift	Change which pixels appear	Skeleton walk, Alien arms
Width morph	Narrower/wider pixel grid	Coin spin
Transform move	`translateY`/`translateX` with same art	Ghost float, Tree sway
Squash-stretch	`scaleX`/`scaleY` inverse	Slime bounce
Multi-frame	3+ distinct keyframes	Bat flap, Dragon fire

Pro tips:

Use steps(1) for authentic retro frame-cut animations
Use ease-in-out for organic, smooth motion
Only change the pixels that move between frames (optimizes CSS size)
drop-shadow filter adds glow effects to pixel art
left/top negative offsets center the sprite after scaling

What's Next?

That covers all 22 classic pixel art sprites from CSSKit. In the next post, we'll create elemental eggs — pixel art eggs with hatching animations for fire, water, grass, electric, dark, ice, psychic, earth, wind, and light elements.

Explore all 310 animations live at CSSKit or star the repo on GitHub.

Originally published at abduarrahman.com

Explore all 310 animations:

Live Demo: CSSKit
Source Code: GitHub

Follow the project:

Instagram: @abduarrahman
YouTube: @abduarrahmanscode
TikTok: @anduarrahmans

Support: Ko-fi

Zoro Santoryu Splash Screen — 30 Days Web Challenge Day 4

Muhammad Abdu ar Rahman — Tue, 12 May 2026 02:23:38 +0000

Try it live at 30days.abduarrahman.com — and the source code is on GitHub.

The Origin

Day 4 needed a splash screen. A proper, cinematic intro — not just a loading spinner. I'm a One Piece fan, and Zoro's Santoryu (Three-Sword Style) is iconic. What if the splash screen was Zoro running, then slashing the screen three times until it shatters?

The result: a multi-phase splash screen with pixel art Zoro running, a loading bar, a dramatic Santoryu reveal, three timed slashes with screen shake, and a shatter effect that breaks the screen into 9 fragments.

What I Built

A cinematic splash screen with 5 phases:

Tap to Start — Pixel art Zoro running animation on a clean white screen
Loading — Progress bar fills over 5 seconds while Zoro keeps running, ambient music plays
Santoryu — Loading music fades out, dramatic Santoryu image zooms in with impact
Slash — Three timed sword slashes with blade tips, scar lines, sparks, and screen shake
Shatter — Screen breaks into 9 fragments that fly apart with debris particles

All powered by a single ZoroPixelLoader canvas component and Framer Motion for phase transitions.

How It Works

Canvas Sprite Animator

The ZoroPixelLoader renders pixel art sprite sheets onto a canvas with frame-by-frame animation:

const SPRITES: Record<string, SpriteConfig> = {
  run:   { src: "/zoro_run.png", frameW: 445, frameH: 363 },
  slash: { src: "/zoro.png",     frameW: 290, frameH: 349 },
};

export default function ZoroPixelLoader({ sprite = "run", fps = 14, scale = 0.5 }) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const frameRef = useRef(0);
  const rafRef = useRef<number>(0);
  const lastTimeRef = useRef(0);
  const config = SPRITES[sprite];
  const fpsInterval = 1000 / fps;

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    const img = new Image();
    img.src = config.src;

    const animate = (time: number) => {
      const delta = time - lastTimeRef.current;
      if (delta >= fpsInterval) {
        lastTimeRef.current = time - (delta % fpsInterval);
        const frame = frameRef.current;
        const col = frame % COLS;
        const row = Math.floor(frame / COLS);

        ctx!.clearRect(0, 0, config.frameW, config.frameH);
        ctx!.drawImage(
          img,
          col * config.frameW, row * config.frameH,
          config.frameW, config.frameH,
          0, 0, config.frameW, config.frameH
        );
        frameRef.current = (frame + 1) % TOTAL_FRAMES;
      }
      rafRef.current = requestAnimationFrame(animate);
    };

    img.onload = () => {
      ctx!.imageSmoothingEnabled = false; // crisp pixel art
      rafRef.current = requestAnimationFrame(animate);
    };

    return () => cancelAnimationFrame(rafRef.current);
  }, [sprite, config, fpsInterval]);

  return (
    <canvas
      ref={canvasRef}
      width={config.frameW}
      height={config.frameH}
      style={{ imageRendering: "pixelated", width: config.frameW * scale, height: config.frameH * scale }}
    />
  );
}

The key detail: imageSmoothingEnabled = false and imageRendering: "pixelated" keep the pixel art crisp at any scale.

Slash Sequence Timing

Three slashes are precisely timed using constants:

const SLASH_SOUND_DUR = 576;    // ms — matches the slash sound effect length
const NUM_SLASHES = 3;
const SLASH_INTERVAL = SLASH_SOUND_DUR;  // each slash starts after previous sound ends
const TOTAL_SLASH_TIME = NUM_SLASHES * SLASH_INTERVAL;
const SANTORYU_DUR = 2736;      // ms — duration of the Santoryu vocal sample

const SLASHES = [
  { angle: -30, delay: 0 },
  { angle: 15,  delay: SLASH_INTERVAL },
  { angle: -50, delay: SLASH_INTERVAL * 2 },
];

Each slash has a blade tip that sweeps across, a persistent scar line, sparks, and a white flash.

Screen Shatter Physics

After the three slashes, the screen shatters into 9 fragments using CSS clipPath polygons:

const FRAGMENTS = [
  { clipPath: "polygon(0 0, 33% 0, 33% 33%, 0 33%)",     origin: "0% 0%",    x: "-20%", y: "-30%", rot: -6 },
  { clipPath: "polygon(33% 0, 66% 0, 66% 33%, 33% 33%)",  origin: "50% 16%",   x: "0%",   y: "-35%", rot: 3 },
  { clipPath: "polygon(66% 0, 100% 0, 100% 33%, 66% 33%)", origin: "100% 0%",  x: "25%",  y: "-25%", rot: 8 },
  // ... 6 more fragments covering the full screen
];

// Each fragment animates away from its transform origin

Audio Transitions

Three audio tracks crossfade during the sequence:

Loading music — loops during the progress bar phase, fades out over ~600ms when Santoryu triggers
Santoryu vocal — plays once during the reveal image
Slash sounds — three precisely timed hits, one per slash

const triggerSantoryu = useCallback(() => {
  // Fade out loading music
  const loadAudio = loadingAudioRef.current;
  if (loadAudio) {
    const fade = setInterval(() => {
      if (loadAudio.volume > 0.05) {
        loadAudio.volume = Math.max(0, loadAudio.volume - 0.05);
      } else {
        loadAudio.pause();
        clearInterval(fade);
      }
    }, 30);
  }

  // Play Santoryu vocal
  const santoryu = new Audio(SANTORYU_MUSIC);
  santoryu.volume = 0.8;
  santoryu.play().catch(() => {});

  // Start slashes after vocal ends
  santoryu.onended = () => startSlash();
}, [onComplete]);

Tech Stack

Technology	Purpose
Next.js	React framework
TypeScript	Type-safe phase management
HTML Canvas	Pixel art sprite animation (ZoroPixelLoader)
Framer Motion	Phase transitions, screen shake, fragment animations
CSS clipPath	Screen shatter fragments
Web Audio	Music crossfade, timed slash sounds