Header Place holder
This is a place holder subheading text for learning purpose demo use.
Beginner
Intermediate
Advanced
Beginner : Learn about Colors.
Click on the circle and select the colors.
Beginner : Learn about opacity.
Slide to change opacity high to low.
Beginner : Learn about blur.
Slide to change blur from low to high.
Beginner : Learn about alignment.
Select your preferred alignment style.
Place holder
Beginner : Learn about corner radius.
Slide to change radius high to low.
Low
High
Beginner : Learn about the difference between fill, stroke & dashed.
Select your preferred style.
Beginner : Learn about button shapes.
Select your preferred style.
Beginner : Learn about Shadows.
Slide to change shadow position and opacity.
LowHigh
LeftRight
Intermediate : Learn about hover effect.
Click the circles to pick colors for normal and hover states.
Test your button
Intermediate : Learn about hover effect on stroke.
Click on the circle and select the colors
Test your button
Intermediate : Learn about text hover effect
Click on the circles and select the colors
Test your button
Intermediate : Learn about Typography and styles.
Click on the circle and select the colors
Header Place holder
This is a place holder subheading text for learning purpose demo use. This is a place holder subheading text for learning purpose demo use. This is a place holder subheading text for learning purpose demo use.
Intermediate : Learn about hierarchy.
Select the position.
Header Place holder
This is a place holder subheading text for learning purpose demo use. This is a place holder subheading text for learning purpose demo use. This is a place holder subheading text for learning purpose demo use.
Intermediate : Learn about gradient.
Select 2 colors for gradient card.
Advanced : Learn about padding.
Select the padding.
Header Place holder
This is a place holder subheading text for learning purpose demo use.
Advanced : Learn about Color palette.
Select colors and create a color palette
Advanced : Learn about shadow depth.
Tune offsets, blur, spread and color to control elevation.
Advanced : Learn about glassmorphism.
Adjust blur, tint and border to craft the glass effect.
Header Place holder
This panel blurs the background behind it. Adjust blur, tint and border to see how glassmorphism works.
Advanced : Learn about morphing shapes.
Change size and corner radius or use presets to morph between square, pill, and circle.
Advanced : Learn about motion delay.
Adjust delay, duration and easing. Preview replays automatically.
Adds extra delay to each item (120ms)
A
B
C
Advanced : Learn about depth & elevation.
Adjust elevation, softness, light direction, ambient mix and tint.
Subtle blues/teals look natural on dark UIs.
Header Place holder
This is a place holder subheading text for learning purpose demo use.
Advanced : Learn about micro-interactions.
Adjust tap/press scale, springiness, and duration for smooth feedback.
Advanced : Learn about glassmorphism layering.
Tune two glass panels independently and swap their stacking order.
Panel A
Panel B
Global
Header Place holder
Layer A — adjust blur, tint and opacity.
Header Place holder
Layer B — offset and optionally bring to front.
Use the toggle to swap which panel is on top. Try contrasting tints.
Advanced : Learn about gradient animation.
Pick colors, choose linear/radial, set angle and animation behaviour.
Header Place holder
Animated gradient background preview.
Set speed to 0 to pause. Angle applies to Linear mode.
Advanced : Learn about responsive layout density.
Adjust spacing scale, padding, font size, and columns for comfortable density.
Header Place holder
This is a place holder subheading text for learning purpose demo use.
Header Place holder
This is a place holder subheading text for learning purpose demo use.
Header Place holder
This is a place holder subheading text for learning purpose demo use.
Header Place holder
This is a place holder subheading text for learning purpose demo use.
Header Place holder
This is a place holder subheading text for learning purpose demo use.
Use presets, then refine spacing, padding, fonts, and columns for your layout.
Advanced : Learn about accessibility testing.
Try high-contrast, contrast boost, color-blind filters, and focus rings.
Forces strong fg/bg colors for WCAG-like testing.
Shows outlines even with mouse to practice tab order.
Header Place holder
This is a place holder subheading text for learning purpose demo use.
Tip: toggle High Contrast and a Color-blind filter, then tab through the elements.
Advanced : Learn about adaptive typography.
Simulate viewport width, type scales, reading distance, line height and measure.
Header Place holder
This is a place holder subheading text for learning purpose demo use.
Subheading
Design that scales with context improves readability and comfort. Adaptive systems factor in viewport width, reading distance, and content type to set font size, line height, and measure.
Use the controls to see how the base size and headings respond to your choices. Smaller viewports get tighter measures and larger line heights; bigger viewports allow wider measures and subtler leading.
- Viewport simulation adjusts the container width.
- Type scale changes the ratio between steps.
- Reading distance nudges the base size up/down.
- Measure keeps line length within optimal ranges.
Tip: set viewport ≈ 375px and Golden scale to see mobile-friendly hierarchy.
Advanced : Learn about micro-interactions (triggers & types).
Choose component, trigger, animation, and timing. Preview updates instantly.
Header Place holder
This is a place holder subheading text for learning purpose demo use.
Tip: choose Scroll trigger and drag inside the preview to fire the animation when items enter view.
Advanced : Learn about theming with CSS variables.
Pick base & accent colors, tune brightness/saturation, radius & elevation — all variable-driven.
Affects surfaces & links.
Buttons & highlights.
Badges & warnings.
Header Place holder
Card A
This is a place holder subheading text for learning purpose demo use.
Learn moreCard B
This is a place holder subheading text for learning purpose demo use.
BetaEverything you see pulls from CSS variables. Change sliders/colors to retheme instantly.