Build Your Cron Expression Every minute Every hour Daily at midnight Daily at 9 AM Weekly (Sun) Monthly (1st) Weekdays 9 AM Every 5 min Every 15 min Yearly (Jan 1) Minute Hour Day (Month) Month Day (Week) * * * * * Copy Description Every minute Next 5 Execution Times Validate an Existing Expression Validate Clear Build cron expressions → Cron Expression Builder ...

Presets Fade In Fade Out Slide In Left Slide In Right Slide In Up Slide In Down Bounce Pulse Shake Spin Flip Swing Animation Properties Duration (s) ...

Generate CSS aspect-ratio property values for perfectly proportioned, responsive containers — no JavaScript required. CSS Aspect Ratio Generator 16:9 4:3 1:1 21:9 9:16 3:2 2:3 Width : Height Max-width 100% Live Preview 16 : 9 Modern CSS — aspect-ratio Recommended Copy Padding-bottom Hack Legacy Fallback Copy How It Works The modern aspect-ratio CSS property tells the browser to maintain a fixed width-to-height ratio as the element resizes. Set it on any block element and pair with width: 100% for a fully responsive container. ...

Visually design any CSS border-radius shape — from simple rounded corners to pills, circles, blobs, and organic forms. Adjust individual corners, toggle elliptical (horizontal/vertical) values, and copy the ready-to-use CSS in one click. Presets None Pill Circle Blob Squircle Leaf Drop Triangle-ish Preview Width (px) Height (px) Color Controls px % Link corners All corners move together Top-Left H V Elliptical Top-Right H V Elliptical Bottom-Right H V Elliptical Bottom-Left H V Elliptical Generated CSS Copy border-radius: 0; How to Use Choose a preset to start from a known shape, or drag the sliders to build from scratch. Toggle px / % — percentage values are relative to the element’s dimensions; pixels are absolute. Unlink corners to set each corner independently. Enable Elliptical on any corner to separate horizontal and vertical radii for organic shapes. Resize the preview box to see how your radius looks at different aspect ratios. Copy the CSS and paste it directly into your stylesheet. Quick Reference: border-radius Syntax Value Meaning border-radius: 8px All corners equal border-radius: 8px 16px TL+BR / TR+BL border-radius: 8px 16px 24px 32px TL TR BR BL (clockwise) border-radius: 40% 60% / 60% 40% Elliptical (H / V) Related Tools Generate box shadows → CSS Box Shadow Generator Build gradients → CSS Gradient Generator Create Flexbox layouts → CSS Flexbox Generator ...

Adjust margin, border, padding, and content dimensions in real time. The diagram updates instantly — just like Chrome DevTools — and the ready-to-copy CSS output updates alongside it. ...

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: ...

Browse all CSS cursor values interactively. Hover any card to preview the cursor, then click to copy the CSS snippet. Use the search box or category tabs to filter. ...