Skip to main content
CSS Doodle Demo
{ @grid: 20 / 100%; @size: 100% 100%; :after { content: ''; position: absolute; inset: 0; background: @pick( radial-gradient(circle at @r(100%) @r(100%), #60a5fa 0%, transparent 60%), radial-gradient(circle at @r(100%) @r(100%), #3b82f6 0%, transparent 50%), radial-gradient(circle at @r(100%) @r(100%), #2563eb 0%, transparent 40%) ); filter: blur(@r(2px, 4px)); transform-origin: center; transform: scale(@r(.8, 1.2)) rotate(@r(-30deg, 30deg)); opacity: @r(.05, .15); mix-blend-mode: screen; animation: mainFloat @r(15s, 25s) ease-in-out infinite; } @keyframes mainFloat { 0%, 100% { transform: translate(0, 0) scale(@r(.8, 1.2)) rotate(@r(-30deg, 30deg)); opacity: @r(.05, .15); } 50% { transform: translate(@r(-20px, 20px), @r(-20px, 20px)) scale(@r(.8, 1.2)) rotate(@r(-30deg, 30deg)); opacity: @r(.1, .2); } } }

Creative CSS Doodle Animations

Explore the magic of generative art with CSS Doodle patterns and animations

Start Creating
{ @grid: 12; @size: 100% 100%; background: @pick(#141414, #1a1a1a); transform: rotate(@r(360deg)); clip-path: polygon( @r(50%) 0, 100% @r(50%), @r(50%) 100%, 0 @r(50%) ); opacity: 0.3; animation: move @r(10s, 30s) linear infinite; @keyframes move { to { transform: rotate(@r(-360deg)); } } }

Doodle Gallery

Explore our collection of generative art patterns

{ @grid: 5; @size: 100% 100%; background: @pick(#ff6b6b, #ff8787, #ffa8a8); border-radius: @pick(30% 70%, 70% 30%); }

Wave Patterns

Dynamic wave animations

{ @grid: 8; @size: 100% 100%; background: @pick(#4ecdc4, #45b7af, #3ca29a); clip-path: @pick(circle(40%), polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)); }

Geometric Forms

Abstract geometric patterns

{ @grid: 10; @size: 100% 100%; background: @pick(#845ec2, #7251b5, #6144a8); transform: rotate(@r(360deg)); }

Cosmic Spirals

Spiral-based compositions

View All Patterns
{ @grid: 20 / 100%; --hue: @r(360); background: hsla(@var(--hue), 50%, 50%, .3); transform: scale(@r(.2, 1.5)); @update: auto 4s; animation: flash ease @r(2s, 4s) infinite; @keyframes flash { 0% { opacity: 0; } 50% { opacity: 0.5; } 100% { opacity: 0; } } }

Interactive Playground

{ @grid: 8; background: hsla(@r(360), 70%, 60%, @r(.2, .6)); }
{ @grid: 25 / 100%; @size: 100% 100%; :after { content: ''; position: absolute; @size: 2px; background: linear-gradient( @p(#00b4d8, #0077b6, #023e8a) ); transform-origin: 50% 50%; transform: rotate(@r(360deg)) scale(@r(.8, 1.2)); opacity: @r(.1, .4); } animation: rotate @r(10s, 20s) linear infinite; @keyframes rotate { to { transform: rotate(1turn); } } }

About CSS Doodle

CSS Doodle is a web component for creating stunning CSS-based patterns. Using a custom syntax that combines the power of CSS and randomization, it enables developers to create complex and beautiful generative art.

  • Pure CSS patterns with no JavaScript dependencies
  • Powerful grid-based layout system
  • Built-in random functions for unique designs
Get Started View Documentation
{ @grid: 10; @size: 100% 100%; :after { content: ''; @size: 80%; position: absolute; background: @pick(#00b4d8, #0077b6); border-radius: @pick(50%, 0); transform: rotate(@r(360deg)); opacity: @r(.1, .3); } } 
<css-doodle>
  {
    @grid: 5 / 200px;
    background: @p(#00b4d8, #0077b6);
    border-radius: @r(50%);
    transform: rotate(@r(360deg));
  }
</css-doodle>
{ @grid: 15 / 100%; background: @pick(#141414, #1a1a1a); margin: 2px; @random { border-radius: 50%; scale: @r(.2, 2); opacity: @r(.1, .3); background: @pick( linear-gradient(to right, #00b4d8, #0077b6), linear-gradient(to bottom, #023e8a, #0096c7) ); animation: pulse @r(2s, 6s) ease infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } }

Powerful Features

Explore the capabilities of CSS Doodle and create stunning generative art with ease

{ @grid: 8; background: @pick(#00b4d8, #0077b6); transform: rotate(@r(360deg)); }

Grid System

Flexible grid-based layout system for creating complex patterns and designs.

{ @grid: 8; background: @pick(#00b4d8, #0077b6); clip-path: @pick(circle(40%), polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)); }

Auto Update

Dynamic pattern updates with customizable animation intervals.

{ @grid: 8; background: @pick(#00b4d8, #0077b6); transform: scale(@r(.2, 1.5)); }

Custom Functions

Built-in functions for randomization and pattern generation.

Explore All Features
{ @grid: 30 / 100%; @size: 100% 100%; :after { content: ''; position: absolute; @size: 2px; background: linear-gradient( @p(#00b4d8, #0077b6, #023e8a) ); transform: rotate(@r(360deg)) scale(@r(.8, 1.2)); opacity: @r(.1, .3); filter: blur(1px); } animation: floatAround @r(20s, 40s) linear infinite; @keyframes floatAround { from { transform: rotate(0deg) translateY(0); } to { transform: rotate(360deg) translateY(@r(-20px, 20px)); } } }

Pattern Showcase

Experience the diversity of patterns possible with CSS Doodle

{ @grid: 10; background: @pick(#00b4d8, #0077b6); border-radius: @pick(50%, 0); transform: rotate(@r(360deg)); margin: 1px; transition: .2s ease; :hover { transform: scale(1.5) rotate(@r(360deg)); } }
{ @grid: 5; @size: 100%; background: @pick(#023e8a, #0096c7); clip-path: polygon( @r(100%) 0, @r(100%) @r(100%), 0 @r(100%) ); margin: 1px; animation: move @r(10s, 20s) linear infinite; @keyframes move { to { transform: rotate(360deg); } } }
{ @grid: 8; --hue: calc(180 + 1.5 * @row() * @col()); background: hsl(var(--hue), 50%, 70%); margin: 1px; transition: .2s @r(.1s, .4s); :hover { transform: scale(@r(.8, 1.2)); opacity: @r(.8, 1); } }
{ @grid: 12 / 100%; background: @pick(#00b4d8, #0077b6); transform: rotate(@r(360deg)); margin: 1px; :after { content: ''; @size: @r(50%, 90%); position: absolute; border-radius: 50%; background: currentColor; opacity: @r(.2, .8); } }
{ @grid: 6; @size: 100%; background: @pick(#023e8a, #0096c7); border-radius: @r(50%); transform: scale(@r(.2, 1.5)); margin: 1px; animation: pulse @r(2s, 4s) ease infinite; @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } }
{ @grid: 15; background: linear-gradient( @r(360deg), @pick(#00b4d8, #0077b6) @r(50%), transparent ); margin: 1px; transform-origin: @pick(center, left, right); animation: spin @r(10s, 20s) linear infinite; @keyframes spin { to { transform: rotate(1turn); } } }
{ @grid: 20 / 100%; --hue: @r(360); background: hsla(var(--hue), 70%, 60%, .1); clip-path: @pick( circle(50% at @r(100%) @r(100%)), polygon(@r(100%) 0, @r(100%) @r(100%), 0 @r(100%)) ); animation: pulse @r(2s, 6s) ease infinite; @keyframes pulse { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.3; } } }

Join Our Community

Connect with fellow creators, share your patterns, and learn from others

Discussion Forum

Share ideas, ask questions, and get help from the community.

Join Discussion

Learning Resources

Access tutorials, guides, and documentation to master CSS Doodle.

Start Learning

Pattern Library

Browse and contribute to our growing collection of community patterns.

Explore Library

Stay Connected

Get weekly updates about new patterns and community highlights

{ @grid: 25 / 100%; @size: 100% 100%; background: @pick(#00b4d8, #0077b6); transform: scale(@r(.2, 1.5)); clip-path: @pick( polygon(@r(100%) 0, @r(100%) @r(100%), 0 @r(100%)), circle(@r(50%)) ); opacity: @r(.05, .1); animation: float @r(10s, 20s) ease-in-out infinite; @keyframes float { 0%, 100% { transform: translateY(0) scale(@r(.2, 1.5)); } 50% { transform: translateY(@r(-20px, 20px)) scale(@r(.2, 1.5)); } } }

Learn CSS Doodle

Start your journey with our comprehensive tutorials and guides

{ @grid: 5; background: @pick(#00b4d8, #0077b6); transform: rotate(@r(360deg)); }
Beginner

Getting Started with CSS Doodle

Learn the basics of CSS Doodle and create your first pattern.

20 min read Read More →
{ @grid: 8; background: @pick(#023e8a, #0096c7); clip-path: @pick(circle(40%), polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)); }
Intermediate

Advanced Grid Techniques

Master complex grid layouts and pattern generation.

35 min read Read More →
{ @grid: 10; background: @pick(#00b4d8, #0077b6); transform: scale(@r(.2, 1.5)); }
Advanced

Animation Mastery

Create complex animations and interactive patterns.

45 min read Read More →
View All Tutorials
:doodle { @grid: 20 / 100vw 100vh; background: #1f1f1f; } @random(.2) { background: @pick(#FFD700, #DAA520); clip-path: circle(@r(50%)); animation: move @r(10s, 20s) linear infinite; } @keyframes move { 100% { transform: translateY(-200%); } }

Get in Touch

Ready to transform your ideas into reality? Let's start a conversation about your project.

Email Us

contact@example.com

Visit Us

123 Design Street
Creative City, DC 10101

Call Us

+1 (555) 123-4567