Generators · Group 04 of 07
Five instruments for the visual layer — gradients, shadows, radii, clip paths and filters, all with a live preview and production-ready CSS one click from your clipboard. Nothing is uploaded, nothing is stored.
Builds linear and radial gradients with a draggable-feeling angle slider, two or three color stops and a live swatch. The output is a single background: declaration you can paste straight into a stylesheet.
linear · 135° · #0033FF → #6E86FF…
background: linear-gradient(135deg, #0033FF 0%, #6E86FF 100%);
Use it for hero sectionsbuttonscardsbackgrounds
Every axis of a shadow on sliders: x/y offset, blur, spread, color and alpha, plus an inset toggle for pressed-in looks. The preview card shows exactly what the declaration will do before it ships.
8px 12px · blur 24 · spread 0 · 25% black…
box-shadow: 8px 12px 24px 0 rgba(20,20,20,.25);
Use it for elevation systemscards & modalsneumorphismhover states
Four corner sliders for the classic border-radius shorthand, with a circle shortcut (50%) for avatars and pills. Asymmetric values are where the fun shapes live — try 24/96/24/96.
24 · 48 · 24 · 48…
border-radius: 24px 48px 24px 48px;
Use it for cardsavatarspills & chipsorganic blobs
Cuts elements into shapes with clip-path: circle, ellipse and a set of polygon presets — triangle, trapezoid, pentagon, hexagon and star. All coordinates are percentages, so the shape scales with the element.
pentagon…
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
Use it for badgesimage maskssection dividerscreative layouts
Nine filter functions on sliders — blur, brightness, contrast, saturate, grayscale, sepia, hue-rotate, invert and opacity — applied live to a photograph so you can see the grade before you commit it. Only non-default functions are emitted.
saturate 140 · contrast 110 · hue −12…
filter: saturate(140%) contrast(110%) hue-rotate(-12deg);
Use it for image gradinghover effectsduotonesbackdrop blurs
Conventions · colors as hex · shadows use rgba alpha · radius in px, 50% for circle · clip shapes are percentage polygons · filter: brightness/contrast/saturate/grayscale/sepia/invert/opacity in %, blur in px, hue in deg · only non-default filter functions are emitted
This page has no backend and no database. Every gradient, shadow and filter you just previewed was rendered by your own browser — your colors and sliders never traveled a single centimeter of cable. Close the page and they're gone for good.
No. Modern browsers support linear-gradient, radial-gradient, box-shadow, border-radius, clip-path and filter without prefixes. The tools emit the standard properties; if you must support very old Safari, add the -webkit- copies by hand.
It draws the shadow inside the element's edges instead of behind it, as if the element were pressed into the page — useful for wells, inputs and neumorphic-style UIs.
Every shape is defined in percentages, so it scales with whatever size the element ends up being. All modern browsers support circle(), ellipse() and polygon() clip paths, and the generator emits exactly one clip-path declaration.
No. IrisTool has no backend and no database. Your colors, sliders and generated CSS run entirely inside your browser tab and disappear the moment you close or refresh the page.