Skip to content

Visual

ContrastColor contrast checker
ColorColor format converter
GradientCSS gradient generator
ShadowBox shadow generator

Layout

CSS GridCSS Grid layout generator
Flexbox GeneratorVisual CSS flexbox layout builder
FontsFont browser & self-host
FluidFluid type & spacing

Utilities

TailwindTailwind ↔ CSS converter
SVGSVG optimizer
Meta TagsMeta & OG tag generator
PX ↔ REMPX to REM converter

All 40 tools →

Guides

Design38
CSS25
Development9
SEO & Accessibility21

View all guides →

UX Laws & Glossary

Cognitive12
Design Principles6
Heuristic3
Gestalt5

View all laws →

Stay in the loop

Design tips, new tools & UX insights. Once a month. No spam.

Form Controls

Data Input10 components

Data Display

Data Display9 components

Navigation

Navigation6 components

Feedback

Feedback6 components

All 52 components →

Visual4

Color contrast checker

Color format converter

CSS gradient generator

Box shadow generator

Layout4

CSS Grid layout generator

Flexbox Generator

Visual CSS flexbox layout builder

Font browser & self-host

Fluid type & spacing

Utilities4

Tailwind ↔ CSS converter

Meta & OG tag generator

PX to REM converter

All 40 tools →

Guides93

SEO & Accessibility

View all guides →

UX Laws & Glossary26

Design Principles

View all laws →

Stay in the loop

Design tips, new tools & UX insights. Once a month. No spam.

Data Input(10)Data Display(9)Navigation(6)Feedback(6)

All 52 components →

Loading…

Subscribe to our newsletter

Design tips, new tools & UX insights. No spam.

Free design tools. No sign-up. No nonsense.

Explore

Home
Tools
Learn Guides
UX Glossary
Components

Popular Tools

Contrast Checker
Gradient Generator
Shadow Generator
Grid Generator

Company

Privacy Policy
Imprint
Newsletter

© 2026 Stellae Studio

Privacy Imprint stellae.studio GitHub

stellae.design
Tools
CSS Clip-Path Editor

Effects

CSS Clip-Path Editor

Visual editor for CSS clip-path shapes with presets, interactive handles, and code export.

Grid

Click to add points. Drag to move. Double-click or right-click to remove.

Transitions to selected preset

Shape Controls

Points: 3

1. (50.0%, 0.0%)

2. (100.0%, 100.0%)

3. (0.0%, 100.0%)

Presets

Output

clip-path: polygon(50.0% 0.0%, 100.0% 100.0%, 0.0% 100.0%);

clip-path is supported in all modern browsers (97%+ global).

Related Guides

Modern CSS Visual Effects

Clipping, masking, and shape tricks

You might also need

Shadow

Box shadow generator

Text Shadow

CSS text shadow generator

Glassmorphism

Frosted glass CSS generator

Neumorphism

Soft UI shadow generator

CSS Clip-Path Generator — Free Online Tool | stellae.design