Free Tools

CSS Box Shadow Generator Live Preview Presets + Add Shadow Layer Generated CSS Copy CSS Tailwind equivalent: — Related Tools Generate gradients → CSS Gradient Generator ...

Design professional CSS buttons visually — no coding required. Adjust every style property in real time, pick from built-in presets, and copy the finished CSS and HTML with one click. Presets Primary Secondary Outline Ghost Gradient 3D Pill Icon Button Button Text Colors Background Color Text Color Border Color Size & Typography Font Size 16px Padding H 20px Padding V 12px Border Radius 8px Border Border Width 0px Border Style Solid Dashed Dotted Double Box Shadow Shadow X 0px Shadow Y 4px Shadow Blur 14px Shadow Spread 0px Shadow Color Shadow Opacity 30% Hover Effects Hover Background Scale on Hover Hover Scale 1.05 Hover Shadow Transition Duration 300ms Live Preview Light Dark Click Me CSS HTML Copy How to Use the CSS Button Generator Choose a preset — start with Primary, Outline, Gradient, or any of the 8 presets. Adjust controls — tweak colors, size, border, shadow, and hover effects live. Toggle preview theme — check how the button looks on light and dark backgrounds. Copy CSS or HTML — switch tabs and click Copy to grab the finished code. Paste into your project — rename .my-button to match your class name. CSS Properties Explained Property What it does background-color Fill color of the button color Text color font-size Text size in pixels padding Inner spacing (vertical / horizontal) border-radius Corner roundness; 9999px = pill shape border Width, style, and color of the border box-shadow Drop or glow shadow with full offset control transition Animation speed for hover effects transform: scale() Scale-up effect on hover Preset Reference Primary — solid indigo fill, subtle shadow, standard border-radius Secondary — muted gray, minimal shadow Outline — transparent background, colored border and text Ghost — no border, no background; background appears on hover only Gradient — linear-gradient background with glow shadow and scale hover 3D — solid bottom shadow creates a raised, pressable look Pill — border-radius: 9999px for fully rounded ends Icon Button — compact square with equal padding, suitable for icon-only actions Tips for Accessible Buttons Maintain at least 4.5:1 contrast ratio between text and background. Never rely on color alone — add a visible focus ring with :focus-visible. Keep tap targets at least 44×44 px for mobile users. Use <button> for actions and <a> for navigation links. Related Free Tools CSS Box Shadow Generator — build and preview multi-layer shadows CSS Gradient Generator — linear, radial, and conic gradients with live preview CSS Animation Generator — keyframe animations with timing and easing controls

Shape Type Polygon Circle Ellipse Inset Custom Preset Shapes Triangle Diamond Pentagon Hexagon Octagon Star Arrow Cross Heart Chevron Circle Settings Radius 50% Center X 50% Center Y 50% Ellipse Settings Radius X 50% Radius Y 30% Center X 50% Center Y 50% Inset Settings Top 10% Right 10% Bottom 10% Left 10% Border Radius 0% Custom Polygon Click on the preview area to add points. Drag points to move them. Right-click a point to delete it. Undo Clear All No points yet — click preview to start. Preview Options Shape Color Live Preview — CSS Output Copy Related Tools Generate box shadows → CSS Box Shadow Generator Build border radius → CSS Border Radius Generator Create SVG paths → SVG Path Editor ...

Drag points to reshape Click on the shape edge to add a point. Right-click a point to delete it. Presets Preview Shape color BG color Image Upload Image Remove Image CSS Output clip-path: polygon(...); Copy CSS polygon · 0 points Reset to Preset How to Use the CSS Clip-Path Maker Choose a preset from the shape gallery — triangle, star, hexagon, and more. Drag the white control points to reshape the polygon to your liking. Double-click on the canvas to add new points along the nearest edge. Right-click a point to remove it (minimum 3 points). Customize the shape color and background color in the Preview panel. Upload an image to see how your clip-path looks on a real photo. Copy the CSS and paste it directly into your stylesheet. Understanding clip-path The clip-path CSS property lets you define a visible region for an element — everything outside is hidden. The most flexible value is polygon(), which takes a list of percentage coordinates: ...

CSS Filter Generator ...

Presets: Navigation Bar Card Grid Holy Grail Sidebar Layout Centered Content Container display flex inline-flex flex-direction row row-reverse column column-reverse justify-content flex-start flex-end center space-between space-around space-evenly align-items stretch flex-start flex-end center baseline align-content normal flex-start flex-end center space-between space-around stretch flex-wrap nowrap wrap wrap-reverse gap height Items + Add Item - Remove Selected Item flex-grow flex-shrink flex-basis order align-self auto flex-start flex-end center baseline stretch width height label Live Preview Click an item to select it Generated CSS Copy CSS Related Tools Generate box shadows → CSS Box Shadow Generator ...

CSS Flexbox Playground Experiment with all Flexbox properties visually. Click an item to adjust its individual properties. Copy the generated CSS anytime. ...

...

Build CSS media queries visually — pick device presets, set breakpoints, toggle orientation and accessibility features, then copy the generated @media code straight into your stylesheet. ...

Minify CSS to reduce file size or beautify/format compressed CSS for readability. Shows compression ratio instantly. No server upload — all processing happens in your browser. Format HTML → HTML Beautifier Minify Beautify Indent: 2 spaces 4 spaces Tab Minify CSS Clear Upload File Input CSS Output Copy Output