MagicPattern
Give Feedback

CSS Background Patterns

Beautiful pure CSS background patterns that you can actually use in your projects!
Created by @d__raptis

CSS Background Patterns - FREE editable patterns that actually look cool | Product Hunt
  • Back Color:

  • Front Color:

  • Opacity:

  • Spacing:

Wavy

Rhombus

ZigZag

ZigZag 3D

Moon

Circles

Diagonal

Diagonal v2

Paper

Isometric

Polka

Polka v2

Lines

Lines v2

Diagonal v3

Boxes

Lines v3

Lines v4

Triangle

Triangle v2

Rectangles

Cross

ABOUT THE TOOL

CSS Background Patterns

CSS Background Patterns is fun little free tool that lets you create cool CSS patterns for your website background. We've curated and parameterized this collection of pure CSS patterns to help you generate & customize the most cool CSS seamless patterns around the web. The collection is being updated regurarly!

Why did you build this tool?

Patterns are everywhere! From your website to your favorite book cover. There're several pattern generators out there but most of them miss something.

CSS background patterns come to the rescue with an easy-to-use interface and a rich collection of CSS backgrounds, 1 click away from your project.

My goal was to offer you a simple app to customize & export a cool CSS background for your projects.

How to add a CSS background pattern on my website?

The easies way to add a div element with its position fixed inside the <body> element.

Check this Codepen code for a real-life example!

Hi fellow creator!

I'm Jim, the founder, designer & engineer behind the MagicPattern toolbox.

For many years, I was struggling to create engaging visuals for products, branding and interfaces. Their creation required pro design skills or many hours of practice.

That's why I build MagicPattern. My mission is to help people create pro graphics with no effort and no prior design knowledge.

- Jim Raptis
Jim Raptis, MagicPattern Founder & CEO

Create Unlimited Graphics
In Seconds.

The easiest way to brand your business uniquely

MagicPattern Geometric Patterns Editor Preview
  • Brand your product, website, business uniquely.
    Create Unlimited Beautiful backgrounds.

  • Product

    Social Media Editor

    Geometric Patterns Generator

    Seamless Patterns Generator

    Mesh Gradients Generator

    API Docs

  • Free Tools

    CSS Patterns

    Blob Generator

    Doodle Backgrounds

  • Company

    About

    Blog

    Changelog

    Join Affiliate Program

  • Legal

    Privacy Policy

    Cookies Policy

    Terms

©2021 MagicPattern. Founded by Jim Raptis