OneTaskCSS Shadow, Gradient and Animation Generators
Box Shadow, Glassmorphism, Cubic Bezier, Keyframes and Gradient Generators
The visual layer: depth, colour, texture and movement. Stack shadows until they look right, blend gradients, frost a panel with a backdrop blur, generate a background pattern, and design an easing curve or a keyframe sequence by dragging rather than by editing numbers and reloading.
Search results
No tool matches that. Try a shorter word.
Most used this week
Cursor Trail
Add a fading dot trail that follows the mouse.
Scanline Effect
Retro CRT scanlines with an optional sweeping band.
Spotlight Effect
A soft glow that follows the mouse across your hero.
Starfield Background
Make stars stream past as if flying through space.
Text Animation
Animate a headline letter by letter and copy the CSS.
Every Shadows & Motion tool
Animated Banner
Design an animated ad banner and export GIF or WebM.
Animated Counter
Make a number count-up animation and copy the code.
Animated Gradient
Make a smoothly shifting gradient background in pure CSS.
Backdrop Filter Generator
Compose backdrop-filter functions and preview the result live.
CSS Noise Generator
Film-grain noise texture from an inline SVG filter, no image file.
CSS Pattern Generator
Repeating background patterns built from CSS gradients, no images.
CSS Text Shadow Generator
Visual text-shadow builder with drop, long, neon and outline presets.
CSS Transform Generator
Compose translate, rotate, scale and skew into one transform value.
Cubic Bezier
Shape a CSS easing curve and watch it animate.
Cursor Trail
Add a fading dot trail that follows the mouse.
Dot Background
Faded dot-grid background for hero sections, pure CSS.
Drop Cap Generator
Style a magazine drop cap for the first letter and copy the CSS.
Floating Shapes
Add slowly rising, spinning shapes behind a hero section.
Gradient Maker
Linear, radial and conic CSS gradients with live preview.
Gradient Text Generator
Fill headline text with a CSS gradient and copy the code.
Image Filter Sandbox
Slide eight filter functions and copy the CSS declaration.
Keyframe Timeline
Edit a multi-stop keyframe timeline and export the CSS.
Logo Reveal
Animate a wordmark reveal and copy the CSS.
Mesh Gradient Generator
Pure-CSS mesh gradients from stacked radial layers.
Neumorphism
Soft UI dual shadows from a single surface colour.
Reading Progress Bar
Make a scroll progress bar for articles and copy the CSS and JS.
Scanline Effect
Retro CRT scanlines with an optional sweeping band.
Spotlight Effect
A soft glow that follows the mouse across your hero.
Starfield Background
Make stars stream past as if flying through space.
Text Animation
Animate a headline letter by letter and copy the CSS.
Text Highlight Effect
Style a highlighter-pen mark on key words and copy the CSS.
Torn Paper Edge
A ripped, jagged paper edge on a card or section.
Shadows
The box shadow generator supports multiple layered shadows with offset, blur, spread, colour and inset, which is how realistic elevation is built — one shadow never looks right. Text shadow does the same for type, including the stacked shadows used for long-shadow and outline effects. Neumorphism produces the paired light and dark shadows of the soft-extruded style from a single background colour.
Gradients and glass
Gradient maker handles linear, radial and conic gradients with any number of colour stops, angle control and a CSS output that includes the fallback colour. Mesh gradient layers several radial gradients to produce the blurred multi-colour backgrounds that flat gradients cannot. Backdrop filter and glassmorphism apply blur, saturation and brightness to whatever sits behind an element, with the border and translucency that sell the frosted-glass look; the tools warn where support needs a prefix.
Filters and texture
Image filters applies the CSS filter functions — grayscale, sepia, contrast, hue-rotate and the rest — to an image you drop in and outputs the rule. CSS noise generates a grain overlay as an inline SVG data URI, and CSS pattern produces repeating geometric backgrounds — stripes, dots, checks, chevrons — from pure gradients, with no image file.
Motion
The cubic-bezier editor lets you drag the control points of an easing curve and compare it against the standard easings on a moving sample. Keyframes builds an animation step by step, with a timeline and the full @keyframes block plus the animation shorthand. CSS transform composes translate, rotate, scale and skew in 2D and 3D and shows the matrix, so you can see why order matters.
Scrollbars
Scrollbar styler writes both the WebKit pseudo-element rules and the standard scrollbar-color and scrollbar-width properties, so the styled scrollbar appears in every browser that supports either.
Output
Each tool shows a live preview and a copyable CSS block, and runs entirely in your browser.
Explore other categories
Calculators
Everyday maths, loans, dates, health and DIY. Nothing uploaded.
94 tools
Converters
Units, images, audio, video, documents and code formats, converted in your browser.
63 tools
Business
Rates, pricing, profit, invoicing and fees. All client-side.
15 tools
Text
Writing, lists, Markdown, HTML, Morse and ciphers.
23 tools
Developer
Regex, cron, formatters, JSON, YAML, Base64, hashing, JWT and SEO. All client-side.
48 tools
Media
Images, audio, video, screen and PDFs. Nothing leaves your browser.
174 tools
Names
Random names for people, fantasy races, sci-fi worlds and RPG characters.
389 tools
Data
Sourced, dated reference tables you can search, cite and download.
9 tools
Money
Pay, bills and property calculators that show their working.
14 tools
Time
Calendar lookups, date arithmetic and live countdowns to the days that matter.
18 tools
Maths
Fractions, primes, algebra and statistics, with the working shown.
12 tools
Science
Physics, chemistry and electronics calculators, with the formula shown.
4 tools
Word Games
Scrabble, Wordle, anagrams, crosswords and rhymes, solved.
4 tools