cubic-bezier() is a CSS timing function that defines how an animation accelerates and decelerates. Its four values — x1, y1, x2, y2 — are two control points of a curve that maps time to progress. The x-axis represents time (0 to 1) and the y-axis represents animation progress.
Pick a preset or drag the orange control points on the canvas to shape your easing curve. The animated ball shows exactly how your timing feels, and the CSS output is ready to paste into any transition or animation.
Frequently Asked Questions
Q: What is cubic-bezier in CSS?
What is cubic-bezier in CSS? It is a timing function used in transitions and animations that defines the speed curve: how fast an animation progresses over time. The default is cubic-bezier(0.25, 0.1, 0.25, 1), also known as ease.
Q: What are the standard easing values?
What are the standard easing values? ease = (0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1), and linear = (0, 0, 1, 1).
Q: How do I create a bounce effect?
How do I create a bounce effect? Overshoot the Y values beyond 1, like cubic-bezier(0.34, 1.56, 0.64, 1). The curve briefly exceeds the target and settles back — a spring-like bounce.
Q: Why does my animation look broken with negative Y?
Why does my animation look broken with negative Y? Negative Y values create anticipation — the element moves backward before going forward. This is intentional for back-easing effects but looks wrong for most content transitions.
Q: Can cubic-bezier be used in animations?
Can cubic-bezier be used in animations? Yes, in both transitions and @keyframes animations, via the timing-function property. It also applies to scroll-linked animations.
CSS Named Colors & Color Psychology
The web has 148 named colors built into CSS, from Coral to Goldenrod. Beyond the code, color psychology shapes how users feel about interfaces — warm tones energize, cool tones calm, and neutrals build trust. This palette mixes CSS classics with the psychology behind them.
Coral #FF7F50Warm and friendly — popular for CTAs in lifestyle brands
Tomato #FF6347Energetic red-orange, great for urgent accents
Goldenrod #DAA520Earthy gold associated with quality and heritage
Teal #008080Balanced blue-green — calm, trustworthy, professional
Indigo #4B0082Deep violet tied to wisdom and premium brands
Crimson #DC143CBold red for passion, alerts, and strong emphasis
SlateBlue #6A5ACDSoft purple-blue common in SaaS dashboards
ForestGreen #228B22Nature and growth — the color of eco and finance brands
HotPink #FF69B4Playful and bold, the signature of youth-oriented design
Navy #000080Authority and stability — the suit-and-tie of colors
Q: What are CSS named colors?
What are CSS named colors? CSS defines 148 named colors like Coral and Goldenrod that work in any stylesheet without hex codes. They are great for prototyping but designers usually switch to hex or HSL for precise brand colors.
Q: How does color psychology affect design?
How does color psychology affect design? Warm colors (red, orange, yellow) create energy and urgency; cool colors (blue, green, teal) create calm and trust. CTAs often use warm tones while financial and health brands prefer blues and greens.