Create complex, organic CSS shapes with this free 8-value border-radius generator. Visualize, customize, and copy clean CSS code for your web projects.
AI Generation Prompt
Free Online CSS Border Radius & Blob Shape Generator
Overview
A comprehensive, browser-based visual utility for frontend developers and designers to create and manipulate complex CSS shapes using the advanced 8-value border-radius syntax. This tool eliminates the guesswork of creating organic 'blob' shapes.
Key Features
- Visual Editor: An interactive preview area where users can adjust 8 individual handles corresponding to the 8-value CSS syntax.
- Real-time Code Generation: A dynamic display area that updates the
border-radiusCSS property instantly as you manipulate the shape. - Preset Library: A set of common starting shapes (e.g., Circle, Capsule, Soft Blob, Organic Squircle) for quick iteration.
- One-Click Copy: A "Copy to Clipboard" button that facilitates rapid integration into production environments.
- Responsive Preview: A fluid container that demonstrates how the shape behaves across different viewport sizes.
UI Layout
- Header: Contains the descriptive title and a brief instructional subtitle.
- Main Tool Area: A horizontal split-view (stacking vertically on mobile).
- Left Panel (Controls): Sliders for each of the 8 values, grouped by corner (Top-Left, Top-Right, Bottom-Right, Bottom-Left), with numerical inputs for precision.
- Right Panel (Preview): A large, central canvas showing the generated shape in real-time, followed by a read-only code output block highlighting the generated CSS.
- Interactivity: Smooth CSS transitions on all handles and preview elements to ensure a premium feel.
Visual Design & Aesthetics
- Palette: Clean, modern, light-mode aesthetic.
- Background:
#FFFFFF - Surface/Card Background:
#F8FAFC - Primary Accent (Buttons):
#3B82F6(Vibrant Blue) - Text:
#1E293B(Dark Slate) - Borders/Dividers:
#E2E8F0
- Background:
- Styling: Large shadows for depth on cards, rounded corners on UI elements (using the tool's own logic), and consistent typography using system fonts.
Implementation Directives
- Single File: All CSS and Vanilla JS must be embedded within one HTML file.
- No Storage: Use strictly in-memory JavaScript variables. Do not attempt to access localStorage or cookies.
- Sandboxed Compatibility: Avoid alert/prompt/confirm. Use custom
<div>based overlays or inline status text for user feedback (e.g., "Copied!"). - Performance: Ensure the preview container re-renders efficiently using
requestAnimationFramefor smooth handle dragging. - External Assets: Use only reliable CDNs for icons (e.g., Phosphor Icons or FontAwesome) and fonts (Google Fonts: Inter).
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is the 8-value border-radius syntax?
The 8-value syntax allows you to define both horizontal and vertical radii for each of the four corners (e.g., border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%). This creates complex, non-uniform shapes often referred to as 'blobs'.
Does this tool save my settings?
No. Due to privacy and security constraints, this tool is stateless and does not use cookies, localStorage, or databases. Your shapes are generated in memory and will reset upon page refresh.
Can I use these shapes in production code?
Yes. The output is pure CSS that can be copied and pasted directly into your stylesheet. It is fully compatible with all modern web browsers.
